HTML5 Canvas Playground

You have ctx, width and height variables available to use in the code.

ctx.fillStyle = 'yellow';
ctx.beginPath();
ctx.arc(100, 100, 75, 0, Math.PI * 2, true); // Head
ctx.closePath();
ctx.fill();

ctx.fillStyle = 'black';
ctx.beginPath();
ctx.arc(70, 80, 10, 0, Math.PI * 2, true); // Left eye
ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.arc(130, 80, 10, 0, Math.PI * 2, true); // Right eye
ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.arc(100, 100, 5, 0, Math.PI * 2, true); // Nose
ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.arc(100, 120, 40, 0, Math.PI, false); // Mouth (clockwise)
ctx.closePath();
ctx.stroke();