lanhed/SimpleCanvasTest.html

## SimpleCanvasTest.html
<!doctype html>
<html>
<head>
	<title>Canvas</title>
	<script type="text/javascript">
		var canvas;
		var context;
		var logo;
		var logoX = 0;
		var logoY = 0;
		var mouseX = 0;
		var mouseY = 0;
		var lines;

		function init() {
			canvas = document.getElementById('canvas');
			context = canvas.getContext('2d');

			lines = new Array();

			logo = new Image();
			logo.src = 'html5_logo_small.png';
			canvas.addEventListener("mousemove", eventMouseMove, false);

			setInterval(drawScreen, 1000/60);
		}

		function eventMouseMove(event) {
			mouseX = event.offsetX;
			mouseY = event.offsetY;
		}

		function drawScreen() {
			context.clearRect(0,0,640,480);

			context.save();
			context.setTransform(1,0,0,1,0,0);

			lines.push({ x:logoX, y:logoY });

			context.strokeStyle = "black";
			context.lineWidth = 1;
			context.beginPath();
			context.moveTo(lines[0].x, lines[0].y);
			for(var i = 1; i < lines.length; i++) {
				context.lineTo(lines[i].x,lines[i].y);
			}
			context.stroke();
			context.closePath();

			logoX += (mouseX - logoX) * 0.1;
			logoY += (mouseY - logoY) * 0.1;
			context.translate(logoX-(logo.width * 0.5), logoY-(logo.height * 0.5));
			context.drawImage(logo,0,0);

			context.restore();
		}
	</script>
</head>
<body onload="init()">
	<canvas width="640" height="480" id="canvas"></canvas>
</body>
	<!doctype html>
	<html>
	<head>
	<title>Canvas</title>
	<script type="text/javascript">
	var canvas;
	var context;
	var logo;
	var logoX = 0;
	var logoY = 0;
	var mouseX = 0;
	var mouseY = 0;
	var lines;

	function init() {
	canvas = document.getElementById('canvas');
	context = canvas.getContext('2d');

	lines = new Array();

	logo = new Image();
	logo.src = 'html5_logo_small.png';
	canvas.addEventListener("mousemove", eventMouseMove, false);

	setInterval(drawScreen, 1000/60);
	}

	function eventMouseMove(event) {
	mouseX = event.offsetX;
	mouseY = event.offsetY;
	}

	function drawScreen() {
	context.clearRect(0,0,640,480);

	context.save();
	context.setTransform(1,0,0,1,0,0);

	lines.push({ x:logoX, y:logoY });

	context.strokeStyle = "black";
	context.lineWidth = 1;
	context.beginPath();
	context.moveTo(lines[0].x, lines[0].y);
	for(var i = 1; i < lines.length; i++) {
	context.lineTo(lines[i].x,lines[i].y);
	}
	context.stroke();
	context.closePath();

	logoX += (mouseX - logoX) * 0.1;
	logoY += (mouseY - logoY) * 0.1;
	context.translate(logoX-(logo.width * 0.5), logoY-(logo.height * 0.5));
	context.drawImage(logo,0,0);

	context.restore();
	}
	</script>
	</head>
	<body onload="init()">
	<canvas width="640" height="480" id="canvas"></canvas>
	</body>