khornberg/circles.html

## circles.html
<!DOCTYPE html>
<html>
<body>

<canvas id="topCanvas" height="500px" width="500px">Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c=document.getElementById('topCanvas');
var colors = ['#00cdff', '#123abc', '#36590', '#fedcba'];
var circles = 5;
function circle() {
//random values
var rand = Math.round(Math.random()*3);
var radius = Math.random() * 5 + 10;
var x = Math.random()*c.width;
var y = Math.random()*100;

//draw the circle
var context=c.getContext('2d');
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.fillStyle = colors[rand];
context.fill();
context.lineWidth = 5;
context.strokeStyle = colors[rand];
context.stroke();
}

var n = 0;
while (n<circles) {
circle();
n++;
}

</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<body>

	<canvas id="topCanvas" height="500px" width="500px">Your browser does not support the HTML5 canvas tag.</canvas>

	<script>
	var c=document.getElementById('topCanvas');
	var colors = ['#00cdff', '#123abc', '#36590', '#fedcba'];
	var circles = 5;
	function circle() {
	//random values
	var rand = Math.round(Math.random()*3);
	var radius = Math.random() * 5 + 10;
	var x = Math.random()*c.width;
	var y = Math.random()*100;

	//draw the circle
	var context=c.getContext('2d');
	context.beginPath();
	context.arc(x, y, radius, 0, 2 * Math.PI, false);
	context.fillStyle = colors[rand];
	context.fill();
	context.lineWidth = 5;
	context.strokeStyle = colors[rand];
	context.stroke();
	}

	var n = 0;
	while (n<circles) {
	circle();
	n++;
	}

	</script>

	</body>
	</html>