jnaglick/gist:3391667

## gistfile1.txt
<!DOCTYPE html>
<html>
	<head>
		<title>canvas demo</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
		<script src="http://raw.github.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js"></script>
		<style>
			canvas {
				border: 1px solid #000;
				position: absolute;
				top: 0;
				left: 0;
				visibility: hidden;
			}
		</style>
	</head>

	<body>
		<canvas id="c" style="visibility: visible;"></canvas>
		<canvas/></canvas>
		<canvas/></canvas>
	</body>

	<script type="text/javascript">
		var buffers = new Array();
		$('canvas').each(function(i) {
			buffers[i] = this;
			this.width = '600';
			this.height = '600';
		});

		var c = buffers[0].getContext('2d');
		var painted = buffers[1].getContext('2d');
		var pointer = buffers[2].getContext('2d');

		function draw(pointerX, pointerY) {
			c.putImageData(painted.getImageData(0, 0, 600, 600), 0, 0);
			c.putImageData(pointer.getImageData(pointerX, pointerY, 20, 20), pointerX, pointerY);
		}

		$('#c')
		.mousedown(function(e) {
			painted.fillRect(e.offsetX-10, e.offsetY-10, 20, 20);
		})
		.mousemove(function(e) {
			pointer.clearRect(0, 0, 600, 600);
			pointer.fillRect(e.offsetX-10, e.offsetY-10, 20, 20);
			draw(e.offsetX-10, e.offsetY-10);
		});
	</script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>canvas demo</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
	<script src="http://raw.github.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js"></script>
	<style>
	canvas {
	border: 1px solid #000;
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
	}
	</style>
	</head>

	<body>
	<canvas id="c" style="visibility: visible;"></canvas>
	<canvas/></canvas>
	<canvas/></canvas>
	</body>

	<script type="text/javascript">
	var buffers = new Array();
	$('canvas').each(function(i) {
	buffers[i] = this;
	this.width = '600';
	this.height = '600';
	});

	var c = buffers[0].getContext('2d');
	var painted = buffers[1].getContext('2d');
	var pointer = buffers[2].getContext('2d');

	function draw(pointerX, pointerY) {
	c.putImageData(painted.getImageData(0, 0, 600, 600), 0, 0);
	c.putImageData(pointer.getImageData(pointerX, pointerY, 20, 20), pointerX, pointerY);
	}

	$('#c')
	.mousedown(function(e) {
	painted.fillRect(e.offsetX-10, e.offsetY-10, 20, 20);
	})
	.mousemove(function(e) {
	pointer.clearRect(0, 0, 600, 600);
	pointer.fillRect(e.offsetX-10, e.offsetY-10, 20, 20);
	draw(e.offsetX-10, e.offsetY-10);
	});
	</script>
	</html>