var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
//arc(x,y,r,sAngle,eAngle,counterclockwise);
ctx.arc(75, 75, 50, 0, Math.PI * 2); // Outer circle
ctx.moveTo(110, 75);
ctx.fillStyle = "yellow";
ctx.fill();


ctx.arc(75, 75, 35, 0, Math.PI); // Mouth (clockwise)
ctx.moveTo(65, 65);
ctx.beginPath();
ctx.arc(60, 65, 5, 0, Math.PI * 2); // Left eye
ctx.moveTo(95, 65);
ctx.fillStyle = "black";
ctx.fill();
ctx.arc(90, 65, 5, 0, Math.PI * 2); // Right eye
ctx.stroke();