mvrilo/gist:725274

## gistfile1.html
<!DOCTYPE html>
<html>
	<head>
		<title>html5 javascript canvas</title>
	</head>
	<body>
		<script>
			var canvas, context, mouse = { x: 0, y: 0 };

			function onDocumentMouseDown(event) {
				mouse.x = event.clientX;
				mouse.y = event.clientY;

				document.addEventListener('mousemove', onDocumentMouseMove, false);
			}

			function onDocumentMouseUp(event) {
				document.removeEventListener('mousemove', onDocumentMouseMove, false);
			}

			function onDocumentMouseMove(event) {
				context.beginPath();
				context.moveTo( mouse.x, mouse.y );
				context.lineTo( event.clientX, event.clientY );
				context.closePath();
				context.stroke();

				mouse.x = event.clientX;
				mouse.y = event.clientY;
			}

			canvas = document.createElement( 'canvas' );
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
			canvas.style.cursor = 'crosshair';

			context = canvas.getContext( '2d' );
			context.strokeStyle = 'rgb(0,0,0)';
			context.lineWidth = 0.5;

			document.addEventListener('mousedown', onDocumentMouseDown, false);
			document.addEventListener('mouseup', onDocumentMouseUp, false);

			document.body.appendChild(canvas);
			document.body.style.padding = "0px";
			document.body.style.margin = "0px";
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>html5 javascript canvas</title>
	</head>
	<body>
	<script>
	var canvas, context, mouse = { x: 0, y: 0 };

	function onDocumentMouseDown(event) {
	mouse.x = event.clientX;
	mouse.y = event.clientY;

	document.addEventListener('mousemove', onDocumentMouseMove, false);
	}

	function onDocumentMouseUp(event) {
	document.removeEventListener('mousemove', onDocumentMouseMove, false);
	}

	function onDocumentMouseMove(event) {
	context.beginPath();
	context.moveTo( mouse.x, mouse.y );
	context.lineTo( event.clientX, event.clientY );
	context.closePath();
	context.stroke();

	mouse.x = event.clientX;
	mouse.y = event.clientY;
	}

	canvas = document.createElement( 'canvas' );
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	canvas.style.cursor = 'crosshair';

	context = canvas.getContext( '2d' );
	context.strokeStyle = 'rgb(0,0,0)';
	context.lineWidth = 0.5;

	document.addEventListener('mousedown', onDocumentMouseDown, false);
	document.addEventListener('mouseup', onDocumentMouseUp, false);

	document.body.appendChild(canvas);
	document.body.style.padding = "0px";
	document.body.style.margin = "0px";
	</script>
	</body>
	</html>