eee-c/Canvas Tag Demo.

## Canvas Tag Demo.
<html>
 <head>
  <style type="text/css">
#canvas {
  border: 1px solid black;
}
  </style>
  <script type="application/javascript">
// key codes / directions
var left = 37,
    up = 38,
    right = 39,
    down = 40;

var direction = null;

document.onkeydown = function(ev) {
  switch(ev.keyCode) {
    case left:
    case up:
    case right:
    case down:
     direction = ev.keyCode;
     break;

    default:
     direction = null;
     break;
  }

  if (direction) return false;
}

document.onkeyup = function(ev) {
  direction = null;
}

function draw(ctx, me) {
  ctx.beginPath();

  // clear drawing area
  ctx.clearRect(0,0,500,500);
  ctx.fillStyle = '#ffffff';
  ctx.strokeStyle = '#000000';
  ctx.fillRect(0,0,500,500);

  // draw me and fill me in
  ctx.rect(me.x,me.y,5,5);

  ctx.fillStyle = '#000000';
  ctx.fill();

  ctx.stroke();

  ctx.closePath();

  var x_diff = 0;
  if (direction == left) x_diff = -1;
  if (direction == right) x_diff = 1;

  var y_diff = 0;
  if (direction == down) y_diff = 1;
  if (direction == up) y_diff = -1;

  var me_next = {
    x: (me.x+x_diff > 0 && me.x+x_diff < 500) ? me.x+(5*x_diff) : me.x,
    y: (me.y+y_diff > 0 && me.y+y_diff < 500) ? me.y+(5*y_diff) : me.y
  };

  setTimeout(function(){draw(ctx, me_next)}, 25);
}

function init() {
 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");

 var me = {x:250, y:250};

 draw(ctx, me);
}
  </script>
 </head>
 <body onload="init()">
   <canvas id="canvas" width="500" height="500"></canvas>
 </body>
</html>
	<html>
	<head>
	<style type="text/css">
	#canvas {
	border: 1px solid black;
	}
	</style>
	<script type="application/javascript">
	// key codes / directions
	var left = 37,
	up = 38,
	right = 39,
	down = 40;

	var direction = null;

	document.onkeydown = function(ev) {
	switch(ev.keyCode) {
	case left:
	case up:
	case right:
	case down:
	direction = ev.keyCode;
	break;

	default:
	direction = null;
	break;
	}

	if (direction) return false;
	}

	document.onkeyup = function(ev) {
	direction = null;
	}

	function draw(ctx, me) {
	ctx.beginPath();

	// clear drawing area
	ctx.clearRect(0,0,500,500);
	ctx.fillStyle = '#ffffff';
	ctx.strokeStyle = '#000000';
	ctx.fillRect(0,0,500,500);

	// draw me and fill me in
	ctx.rect(me.x,me.y,5,5);

	ctx.fillStyle = '#000000';
	ctx.fill();

	ctx.stroke();

	ctx.closePath();

	var x_diff = 0;
	if (direction == left) x_diff = -1;
	if (direction == right) x_diff = 1;

	var y_diff = 0;
	if (direction == down) y_diff = 1;
	if (direction == up) y_diff = -1;

	var me_next = {
	x: (me.x+x_diff > 0 && me.x+x_diff < 500) ? me.x+(5*x_diff) : me.x,
	y: (me.y+y_diff > 0 && me.y+y_diff < 500) ? me.y+(5*y_diff) : me.y
	};

	setTimeout(function(){draw(ctx, me_next)}, 25);
	}

	function init() {
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");

	var me = {x:250, y:250};

	draw(ctx, me);
	}
	</script>
	</head>
	<body onload="init()">
	<canvas id="canvas" width="500" height="500"></canvas>
	</body>
	</html>