IDeATe

Back to Parent
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title> Several Circles Reproduction </title>
</head>
<body>
<canvas id="myCanvas" width="640" height="652" style="border:1px solid #000000;">
</canvas>



<script>
var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
	  
	  context.rect(0,0,640,652);
	  context.fillStyle="black";
	  context.fill();

	  //cyan
      context.beginPath();
      context.arc(290, 255, 170, 0, 2 * Math.PI, false);
      context.fillStyle = "rgb(107, 227, 240)";
      context.fill();
  
	  //blue
      context.beginPath();
      context.arc(290, 250, 160, 0, 2 * Math.PI, false);
      context.fillStyle = "rgb(20, 39, 213)";
      context.fill();
	  
	  //black
      context.beginPath();
      context.arc(255, 230, 120, 0, 2 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
	  
	  //upper purple
      context.beginPath();
      context.arc(360, 130, 60, 0, 2 * Math.PI, false);
	  context.globalAlpha=0.6;
      context.fillStyle = "rgb(202, 96, 240)";
      context.fill();
	  
	  //light green
      context.beginPath();
      context.arc(355, 315, 25, 0, 2 * Math.PI, false);
	  context.globalAlpha=0.6;
      context.fillStyle = "rgb(120, 249, 120)";
      context.fill();
	  
	  //barely visible blue
      context.beginPath();
      context.arc(315, 335, 10, 0, 2 * Math.PI, false);
	  context.globalAlpha=0.4;
      context.fillStyle = "rgb(20, 39, 213)";
      context.fill();
	 
	  //yellow middle of main
      context.beginPath();
      context.arc(335, 365, 25, 0, 2 * Math.PI, false);
	  context.globalAlpha=0.6;
      context.fillStyle = "rgb(245, 190, 41)";
      context.fill();
	  
	  //pink top left
      context.beginPath();
      context.arc(80, 120, 25, 0, 2 * Math.PI, false);
	  context.globalAlpha=0.8;
      context.fillStyle = "rgb(255, 134, 223)";
      context.fill();
	  
	  //yellow top left
      context.beginPath();
      context.arc(65, 60, 12, 0, 2 * Math.PI, false);
	  context.globalAlpha=0.8;
      context.fillStyle = "rgb(255, 248, 134)";
      context.fill();
	  
	  //forest green right
      context.beginPath();
      context.arc(490, 200, 60, 0, 2 * Math.PI, false);
	  context.globalAlpha=0.6;
      context.fillStyle = "rgb(18, 127, 112)";
      context.fill();
	  
	  //little cyan in forest green
      context.beginPath();
      context.arc(490, 200, 18, 0, 2 * Math.PI, false);
	  context.globalAlpha=1;
      context.fillStyle = "rgb(107, 227, 240)";
      context.fill();
	  
	  //black in forest green
      context.beginPath();
      context.arc(490, 200, 16, 0, 2 * Math.PI, false);
	  context.globalAlpha=1;
      context.fillStyle = "black";
      context.fill();
	  
	  //yellow top right
      context.beginPath();
      context.arc(505, 100, 25, 0, 2 * Math.PI, false);
	  context.globalAlpha=0.8;
      context.fillStyle = "rgb(255, 248, 134)";
      context.fill();
	  
	  //orange top right
      context.beginPath();
      context.arc(575, 140, 12, 0, 2 * Math.PI, false);
	  context.globalAlpha=0.8;
      context.fillStyle = "rgb(245, 122, 41)";
      context.fill();
	  
	  //red top right
      context.beginPath();
      context.arc(600, 80, 9, 0, 2 * Math.PI, false);
	  context.globalAlpha=0.8;
      context.fillStyle = "rgb(240, 69, 69)";
      context.fill();
	  
	  //little cyan in mid right 
      context.beginPath();
      context.arc(575, 390, 10, 0, 2 * Math.PI, false);
	  context.globalAlpha=1;
      context.fillStyle = "rgb(107, 227, 240)";
      context.fill();
	  
	  //little blue in mid right
      context.beginPath();
      context.arc(575, 390, 8, 0, 2 * Math.PI, false);
	  context.globalAlpha=1;
      context.fillStyle = "rgb(20, 39, 213)";
      context.fill();
	  
	  //big white bottom right
      context.beginPath();
      context.arc(515, 490, 65, 0, 2 * Math.PI, false);
	  context.globalAlpha=.75;
      context.fillStyle = "rgb(255, 235, 235)";
      context.fill();
	  
	  //baby red bottom right
      context.beginPath();
      context.arc(530, 445, 8, 0, 2 * Math.PI, false);
	  context.globalAlpha=.75;
      context.fillStyle = "red";
      context.fill();
	  
	  //baby black bottom right
      context.beginPath();
      context.arc(550, 450, 4, 0, 2 * Math.PI, false);
	  context.globalAlpha=.75;
      context.fillStyle = "black";
      context.fill();
	  
	  //baby yellow way right
      context.beginPath();
      context.arc(584, 490, 9, 0, 2 * Math.PI, false);
	  context.globalAlpha=.6;
      context.fillStyle = "rgb(245, 190, 41)";
      context.fill();
	  
	  //baby yellow bottom right
      context.beginPath();
      context.arc(470, 570, 9, 0, 2 * Math.PI, false);
	  context.globalAlpha=.9;
      context.fillStyle = "rgb(245, 190, 41)";
      context.fill();
	  
	  //baby red bottom right
      context.beginPath();
      context.arc(440, 600, 12, 0, 2 * Math.PI, false);
	  context.globalAlpha=.9;
      context.fillStyle = "red";
      context.fill();
	  
	  //baby blue bottom right
      context.beginPath();
      context.arc(520, 620, 10, 0, 2 * Math.PI, false);
	  context.globalAlpha=.8;
      context.fillStyle = "rgb(81, 140, 242)";
      context.fill();
	  
	  //peach ring bottom right
      context.beginPath();
      context.arc(480, 480, 22, 0, 2 * Math.PI, false);
	  context.globalAlpha=.8;
      context.fillStyle = "rgb(252, 220, 147)";
      context.fill();
	  
	  //baby blue bottom right
      context.beginPath();
      context.arc(480, 480, 18, 0, 2 * Math.PI, false);
	  context.globalAlpha=.8;
      context.fillStyle = "rgb(85, 250, 255)";
      context.fill();
	  
	  //peach ring bottom right
      context.beginPath();
      context.arc(437, 467, 19, 0, 2 * Math.PI, false);
	  context.globalAlpha=.6;
      context.fillStyle = "rgb(252, 220, 147)";
      context.fill();
	  
	  //orange top right
      context.beginPath();
      context.arc(355, 510, 13, 0, 2 * Math.PI, false);
	  context.globalAlpha=0.8;
      context.fillStyle = "rgb(245, 122, 41)";
      context.fill();
	  
	  //blue bottom left
      context.beginPath();
      context.arc(150, 550, 18, 0, 2 * Math.PI, false);
	  context.globalAlpha=.7;
      context.fillStyle = "rgb(81, 140, 242";
      context.fill();
	  
	  //pink bottom left
      context.beginPath();
      context.arc(120, 520, 10, 0, 2 * Math.PI, false);
	  context.globalAlpha=0.8;
      context.fillStyle = "rgb(255, 134, 223)";
      context.fill();
	  
	  //yellow ring bottom left
      context.beginPath();
      context.arc(100, 570, 9, 0, 2 * Math.PI, false);
	  context.globalAlpha=.9;
      context.fillStyle = "rgb(245, 190, 41)";
      context.fill();
      context.beginPath();
      context.arc(100, 570, 7, 0, 2 * Math.PI, false);
	  context.globalAlpha=.9;
      context.fillStyle = "black";
      context.fill();

	  //blue bottom of main
      context.beginPath();
      context.arc(375, 425, 40, 0, 2 * Math.PI, false);
  	  context.globalAlpha=0.9;
      context.fillStyle = "rgb(104, 196, 249)";
      context.fill();

	  //orange
      context.beginPath();
      context.arc(385, 355, 40, 0, 2 * Math.PI, false);
	  context.globalAlpha=0.6;
      context.fillStyle = "rgb(245, 122, 41)";
      context.fill();
	 
	  //pink
      context.beginPath();
      context.arc(415, 380, 16, 0, 2 * Math.PI, false);
	  context.globalAlpha=0.6;
      context.fillStyle = "rgb(255, 10, 240)";
      context.fill();
	  
	  //baby black by pink
      context.beginPath();
      context.arc(400, 385, 4, 0, 2 * Math.PI, false);
	  context.globalAlpha=.75;
      context.fillStyle = "black";
      context.fill();
	  
	  
	  
	  //5 in a row
      context.beginPath();
      context.arc(154, 457, 25, 0, 2 * Math.PI, false);
	  context.globalAlpha=0.9;
      context.fillStyle = "red";
      context.fill();
	  context.lineWidth = 0.5;
	  context.strokeStyle = '#003300';
	  context.stroke();
      context.beginPath();
      context.arc(130, 450, 25, 0, 2 * Math.PI, false);
	  context.globalAlpha=0.9;
      context.fillStyle = "rgb(255, 248, 134)";
      context.fill();
	  context.lineWidth = 0.5;
	  context.strokeStyle = '#003300';
	  context.stroke();
      context.beginPath();
      context.arc(184, 457, 25, 0, 2 * Math.PI, false);
	  context.globalAlpha=0.6;
      context.fillStyle = "rgb(255, 150, 57)";
      context.fill();
	  context.lineWidth = 0.5;
	  context.strokeStyle = '#003300';
	  context.stroke();
      context.beginPath();
      context.arc(198, 428, 25, 0, 2 * Math.PI, false);
	  context.globalAlpha=0.9;
      context.fillStyle = "rgb(255, 90, 57)";
      context.fill();
	  context.lineWidth = 0.5;
	  context.strokeStyle = '#003300';
	  context.stroke();
      context.beginPath();
      context.arc(170, 400, 25, 0, 2 * Math.PI, false);
	  context.globalAlpha=0.9;
      context.fillStyle = "rgb(252, 178, 50)";
      context.fill();
	  context.lineWidth = 0.5;
	  context.strokeStyle = '#003300';
	  context.stroke();
	  
	  //middle left rings
      context.beginPath();
      context.arc(90, 370, 40, 0, 2 * Math.PI, false);
	  context.globalAlpha=0.9;
      context.fillStyle = "rgb(104, 196, 249)";
      context.fill();
      context.beginPath();
      context.arc(90, 370, 38, 0, 2 * Math.PI, false);
	  context.globalAlpha=0.9;
      context.fillStyle = "black";
      context.fill();
      context.beginPath();
      context.arc(90, 370, 35, 0, 2 * Math.PI, false);
	  context.globalAlpha=0.9;
      context.fillStyle = "rgb(242,196,249)";
      context.fill();
      context.beginPath();
      context.arc(100, 353, 11, 0, 2 * Math.PI, false);
	  context.globalAlpha=0.9;
      context.fillStyle = "black";
      context.fill();
	  
	  //baby yellow ring
      context.beginPath();
      context.arc(130, 310, 8, 0, 2 * Math.PI, false);
	  context.globalAlpha=0.9;
      context.fillStyle = "black";
      context.fill();
	  context.lineWidth = 2;
	  context.strokeStyle = 'rgb(252, 178, 50)';
	  context.stroke();
	  
	  //baby pink ring
      context.beginPath();
      context.arc(204, 394, 5, 0, 2 * Math.PI, false);
	  context.globalAlpha=0.9;
      context.fillStyle = "black";
      context.fill();
	  context.lineWidth = 2;
	  context.globalAlpha=0.8;
	  context.strokeStyle = 'rgb(255, 10, 240)';
	  context.stroke();
	  
	  //baby light pink
      context.beginPath();
      context.arc(234, 394, 5, 0, 2 * Math.PI, false);
	  context.globalAlpha=0.6;
      context.fillStyle = "rgb(243,84,195)";
      context.fill();
	  
	  
      context.beginPath();
      context.arc(280, 430, 30, 0, 2 * Math.PI, false);
	  context.globalAlpha=0.9;
      context.fillStyle = "rgb(181, 107, 255)";
      context.fill();
	  
	  
	  //baby black by green/purp
      context.beginPath();
      context.arc(257, 450, 4, 0, 2 * Math.PI, false);
	  context.globalAlpha=1;
      context.fillStyle = "black";
      context.fill();
	
	  
</script> 


</body>
</html>
Click to Expand
Content Rating

Is this a good/useful/informative piece of content to include in the project? Have your say!