Untitled

<!DOCTYPE HTML>
<html>
  <head>
  <title>Canvas Usage Template</title>
  <script type="text/javascript">
var buffers = [];
var counter = 0;
var bitmap = new Image();
function begin() {
  canvas1 = document.getElementById('canvasid1');
  canvas2 = document.getElementById('canvasid2');
  buffers.push(canvas1);
  buffers.push(canvas2);
  drawingBuffer = 1;
  bitmap.onload = anim;
  bitmap.src = "sprites.png"
}
function anim() {

  setInterval(draw, 20);
}
function draw() {
    canvas = buffers[drawingBuffer];
    if (canvas.getContext){
        ctx = canvas.getContext('2d');
        // do your drawing here

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.lineWidth = 3;
        ctx.strokeStyle = "black";
        ctx.fillStyle = "yellow";
        ctx.save();
        ctx.translate(200, 200);

        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(0, -100);
	     	ctx.lineTo(-50,0 );
	     	ctx.moveTo(0, -100);
	     	ctx.lineTo(50,0 );
        ctx.moveTo(0, 0);
		    ctx.lineTo(-50,100 );
		    ctx.moveTo(0, 0);
		    ctx.lineTo(50,100 );


        ctx.stroke();

		ctx.beginPath();
        ctx.arc(0,-120, 20, 0, Math.PI*4/2, false);
		ctx.fillStyle = 'green';
		ctx.fill();
		ctx.stroke();

		ctx.beginPath();
        ctx.arc(4,-120, 2, 0, Math.PI*4/2, false);
		ctx.stroke();

		ctx.beginPath();
        ctx.arc(-4,-120, 2, 0, Math.PI*4/2, false);
		ctx.stroke();

		ctx.beginPath();
        ctx.arc(0,-115, 5, 0, Math.PI*2/2, false);
		ctx.stroke();

        ctx.restore();
        buffers[1-drawingBuffer].style.visibility='hidden';
        buffers[drawingBuffer].style.visibility='visible';
        drawingBuffer = 1-drawingBuffer;
    }
}

  </script>
  </head>
  <body onload="begin()">
<div style="width:640px">
    <canvas id="canvasid1" style="visibility:visible" width="640" height="480"></canvas>
    <canvas id="canvasid2" style="visibility:hidden;position:relative;top:-480px;" width="640" height="480"></canvas>
</div>
  </body>
</html>