Random Loop thingy
will randomize the color when html used.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
var R1 = Math.round(Math.random()*255);
var G1 = Math.round(Math.random()*255);
var B1 = Math.round(Math.random()*255);
var RGBA1 = "rgba("+R1+","+G1+","+B1+",0.03)";
var R2 = Math.round(Math.random()*255);
var G2 = Math.round(Math.random()*255);
var B2 = Math.round(Math.random()*255);
var RGBA2 = "rgba("+R2+","+G2+","+B2+",1)";
var R3 = Math.round(Math.random()*255);
var G3 = Math.round(Math.random()*255);
var B3 = Math.round(Math.random()*255);
var RGBA3 = "rgba("+R3+","+G3+","+B3+",1)";
var R4 = Math.round(Math.random()*255);
var G4 = Math.round(Math.random()*255);
var B4 = Math.round(Math.random()*255);
var RGBA4 = "rgba("+R4+","+G4+","+B4+",0.03)";
var R5 = Math.round(Math.random()*255);
var G5 = Math.round(Math.random()*255);
var B5 = Math.round(Math.random()*255);
var RGBA5 = "rgba("+R5+","+G5+","+B5+",1)";
for (var i=0; i<700; i+=1) {
var x = canvas.width * Math.random();
var y = canvas.height * Math.random();
// var rad = i;
var rad = Math.random()*100;
var startA = 0;
var endA = Math.PI * 2;
var cw = true;
var x1 = x ;
var y1 = y ;
var x2 = x + i;
var y2 = y + i;
context.beginPath();
context.arc(x,y,rad,startA,endA,cw);
var grd = context.createRadialGradient(x1,y1,rad/5,x1,y1,rad);
grd.addColorStop(0, RGBA5);
grd.addColorStop(0.5, RGBA4);
grd.addColorStop(1, RGBA1);
context.fillStyle = grd;
context.fill();
//context.stroke();
context.closePath();
}
var inc = 5;
for (var i=0; i < canvas.height; i+=inc ) {
context.beginPath();
context.moveTo(canvas.width-i, 400);
context.lineTo(0,i);
context.lineTo(0,0);
context.fill;
context.fill();
context.stroke RGBA2;
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i, canvas.height/2);
context.lineTo(canvas.width, canvas.height-i);
context.lineTo(canvas.width, canvas.height);
context.fillStyle = RGBA1;
context.fill();
context.stroke RGBA2;
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(canvas.width/2, i);
context.lineTo(i,0);
context.lineTo(canvas.width, 0);
context.fillStyle = RGBA4;
context.fill();
context.stroke RGBA3;
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(400, i);
context.lineTo(i, canvas.height);
context.lineTo(0, canvas.height);
context.fillStyle = RGBA4;
context.fill();
context.stroke RGBA3;
context.stroke();
context.closePath();
}
for (var i=0; i<50; i+=1) {
var x = canvas.width * Math.random();
var y = canvas.height * Math.random();
// var rad = i;
var rad = Math.random()*50;
var startA = 0;
var endA = Math.PI * 2;
var cw = true;
var x1 = x ;
var y1 = y ;
var x2 = x + i;
var y2 = y + i;
context.beginPath();
context.arc(x,y,rad,startA,endA,cw);
var grd = context.createRadialGradient(x1,y1,rad/5,x1,y1,rad);
grd.addColorStop(0, RGBA3);
grd.addColorStop(0.5, RGBA4);
grd.addColorStop(1, RGBA1);
context.fillStyle = grd;
context.fill();
//context.stroke();
context.closePath();
}
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
//////CODE BY MEAGAN GLENNON!!!!!!!!
/////Canvas Back
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
context.fill;
context.fill();
context.stroke();
////head RED
context.beginPath();
context.arc(300,300,250,0,2*Math.PI);
context.fill;
context.fill();
context.lineWidth=10;
context.stroke();
/// WEBBING
context.beginPath();
context.moveTo(300,45);
context.lineTo(300,550);
context.lineWidth=10;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(45,300);
context.lineTo(550,300);
context.lineWidth=10;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(430, 85);
context.quadraticCurveTo(300, 300, 375, 540);
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(510,165);
context.quadraticCurveTo(320, 300, 519, 430);
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(390,375);
context.quadraticCurveTo(390, 460, 460, 490);
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(170, 85);
context.quadraticCurveTo(300, 300, 225, 540);
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(90,165);
context.quadraticCurveTo(320, 300, 80, 430);
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(210,375);
context.quadraticCurveTo(210, 460, 140, 490);
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
////// webbing part 2
context.beginPath();
context.moveTo(485, 185);
context.quadraticCurveTo(400, 200, 415, 108);
context.quadraticCurveTo(340, 180, 300, 80);
context.quadraticCurveTo(260, 180, 183, 108);
context.quadraticCurveTo(200, 200, 119, 185);
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(435, 240);
context.quadraticCurveTo(370, 270, 370, 215);
context.quadraticCurveTo(320,250, 300, 200);
context.quadraticCurveTo(280, 250, 230, 215);
context.quadraticCurveTo(230,270, 180, 240);
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(400, 430);
context.quadraticCurveTo(360, 400,355,450);
context.quadraticCurveTo(315, 400, 300, 470);
context.quadraticCurveTo(285, 400, 245, 450);
context.quadraticCurveTo(240, 400, 200, 430);
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(520, 430);
context.quadraticCurveTo(430, 400,427,470);
context.quadraticCurveTo(380, 450, 360, 500);
context.quadraticCurveTo(335, 460, 300, 500);
context.quadraticCurveTo(265,460, 240, 500);
context.quadraticCurveTo(220, 450, 173, 470);
context.quadraticCurveTo(170, 400, 80, 430);
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
//////////////////EYES
context.beginPath();
context.moveTo(340, 310);
context.lineTo(500,230);
context.bezierCurveTo(500,420,350,420,340,310);
context.lineWidth = 20;
context.strokeStyle = "black";
context.fill
context.fill();
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(260, 310);
context.lineTo(100,230);
context.bezierCurveTo(110,420,250,420,260,310);
context.lineWidth = 20;
context.strokeStyle = "black";
context.fill
context.fill();
context.closePath();
context.stroke();
////////////////////////////////////// end here
////////CODE BY MEAGAN GLENNON!!!!
};
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="600"></canvas>
</body>
</html>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
//////CODE BY MEAGAN GLENNON!!!!!!!!
/////Canvas Back
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
context.fill;
context.fill();
context.stroke();
////head RED
context.beginPath();
context.arc(300,300,250,0,2*Math.PI);
context.fill;
context.fill();
context.lineWidth=10;
context.stroke();
/// WEBBING
context.beginPath();
context.moveTo(300,45);
context.lineTo(300,550);
context.lineWidth=10;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(45,300);
context.lineTo(550,300);
context.lineWidth=10;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(430, 85);
context.quadraticCurveTo(300, 300, 375, 540);
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(510,165);
context.quadraticCurveTo(320, 300, 519, 430);
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(390,375);
context.quadraticCurveTo(390, 460, 460, 490);
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(170, 85);
context.quadraticCurveTo(300, 300, 225, 540);
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(90,165);
context.quadraticCurveTo(320, 300, 80, 430);
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(210,375);
context.quadraticCurveTo(210, 460, 140, 490);
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
////// webbing part 2
context.beginPath();
context.moveTo(485, 185);
context.quadraticCurveTo(400, 200, 415, 108);
context.quadraticCurveTo(340, 180, 300, 80);
context.quadraticCurveTo(260, 180, 183, 108);
context.quadraticCurveTo(200, 200, 119, 185);
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(435, 240);
context.quadraticCurveTo(370, 270, 370, 215);
context.quadraticCurveTo(320,250, 300, 200);
context.quadraticCurveTo(280, 250, 230, 215);
context.quadraticCurveTo(230,270, 180, 240);
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(400, 430);
context.quadraticCurveTo(360, 400,355,450);
context.quadraticCurveTo(315, 400, 300, 470);
context.quadraticCurveTo(285, 400, 245, 450);
context.quadraticCurveTo(240, 400, 200, 430);
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(520, 430);
context.quadraticCurveTo(430, 400,427,470);
context.quadraticCurveTo(380, 450, 360, 500);
context.quadraticCurveTo(335, 460, 300, 500);
context.quadraticCurveTo(265,460, 240, 500);
context.quadraticCurveTo(220, 450, 173, 470);
context.quadraticCurveTo(170, 400, 80, 430);
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
//////////////////EYES
context.beginPath();
context.moveTo(340, 310);
context.lineTo(500,230);
context.bezierCurveTo(500,420,350,420,340,310);
context.lineWidth = 20;
context.strokeStyle = "black";
context.fill
context.fill();
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(260, 310);
context.lineTo(100,230);
context.bezierCurveTo(110,420,250,420,260,310);
context.lineWidth = 20;
context.strokeStyle = "black";
context.fill
context.fill();
context.closePath();
context.stroke();
////////////////////////////////////// end here
////////CODE BY MEAGAN GLENNON!!!!
};
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="600"></canvas>
</body>
</html>