// Let's study CANVAS tag! This page is based on:
// open("http://developer.mozilla.org/en/docs/Canvas_tutorial")
// (IE is not supported)

// Initialize environment
canvas = document.createElement("canvas");
$('playArea').appendChild(canvas)
canvas.width = "150"
canvas.height= "150"
ctx = canvas.getContext('2d');

// Draw various rectangles.
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);

// Draw a path.
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();

// An example of moveTo.
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // outlines
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // mouth
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // right eye
ctx.stroke();

// An example of image
ctx.clearRect(0, 0, canvas.width, canvas.height);
img = new Image();
img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
ctx.drawImage(img, 10, 10);