johndalton/OMGCIRCLES!!1!

## OMGCIRCLES!!1!
<html>
<head>
	<title>OMGCIRCLES!!1!</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600">
Fallback content, in case the browser does not support Canvas.
</canvas>
<script>
var myCanvas, context;

// One of many approaches; see:
//   http://stackoverflow.com/questions/4899799/whats-the-best-way-to-set-a-single-pixel-in-an-html5-canvas
// and the linked doc:
//   http://jsperf.com/setting-canvas-pixel
function plot(x, y) {
	context.fillRect(x, y, 1, 1);
}

// Touch each pixel in a circle once and only once.
function circle (ox, oy, r) {
	var x, y;
	var r_squared = r*r;
	var x_squared = 0;
	var y_squared = 0;

	// Should check parameters…

	// Origin!
	plot(ox, oy);

	// Centre line (vertical)
	for (y=1; y <= r; y++) {
		plot(ox, oy+y);
		plot(ox, oy-y);
	}

	// All the rest
	for (x=1; x <= r; x++) {
		y_squared = 0;

		// Centre line (horizontal)
		plot(ox+x, oy);
		plot(ox-x, oy);

		// Sides
		for (y=1; y_squared <= r_squared - x_squared; y++) {
			// right side
			plot(ox+x,oy-y);
			plot(ox+x,oy+y);
			// left side
			plot(ox-x,oy-y);
			plot(ox-x,oy+y);

			// This approach via https://twitter.com/TheRealBnut/statuses/422531615437230080
			y_squared = y_squared + y + y + 1;
		}

		x_squared = x_squared + x + x + 1;
	}
}

myCanvas = document.getElementById("myCanvas");
context = myCanvas.getContext("2d");

context.fillStyle = '#000000';
circle(100,100,50);
circle(300,150,100);
circle(500,200,70);

</script>
</body>
</html>
	<html>
	<head>
	<title>OMGCIRCLES!!1!</title>
	</head>
	<body>
	<canvas id="myCanvas" width="800" height="600">
	Fallback content, in case the browser does not support Canvas.
	</canvas>
	<script>
	var myCanvas, context;

	// One of many approaches; see:
	// http://stackoverflow.com/questions/4899799/whats-the-best-way-to-set-a-single-pixel-in-an-html5-canvas
	// and the linked doc:
	// http://jsperf.com/setting-canvas-pixel
	function plot(x, y) {
	context.fillRect(x, y, 1, 1);
	}

	// Touch each pixel in a circle once and only once.
	function circle (ox, oy, r) {
	var x, y;
	var r_squared = r*r;
	var x_squared = 0;
	var y_squared = 0;

	// Should check parameters…

	// Origin!
	plot(ox, oy);

	// Centre line (vertical)
	for (y=1; y <= r; y++) {
	plot(ox, oy+y);
	plot(ox, oy-y);
	}

	// All the rest
	for (x=1; x <= r; x++) {
	y_squared = 0;

	// Centre line (horizontal)
	plot(ox+x, oy);
	plot(ox-x, oy);

	// Sides
	for (y=1; y_squared <= r_squared - x_squared; y++) {
	// right side
	plot(ox+x,oy-y);
	plot(ox+x,oy+y);
	// left side
	plot(ox-x,oy-y);
	plot(ox-x,oy+y);

	// This approach via https://twitter.com/TheRealBnut/statuses/422531615437230080
	y_squared = y_squared + y + y + 1;
	}

	x_squared = x_squared + x + x + 1;
	}
	}

	myCanvas = document.getElementById("myCanvas");
	context = myCanvas.getContext("2d");

	context.fillStyle = '#000000';
	circle(100,100,50);
	circle(300,150,100);
	circle(500,200,70);

	</script>
	</body>
	</html>