<canvas id="my-canvas" width="650px" height="500px">
</canvas>
let myCanvas = document.getElementById('my-canvas');

let ctx = myCanvas.getContext('2d');

ctx.fillStyle = 'lightyellow';
ctx.lineWidth = 3;

ctx.beginPath();
ctx.arc(275,275, 150, 0, Math.PI * 2, true);
ctx.fill();
ctx.strokeStyle ='gold';
ctx.arc(275,275, 150, 0, Math.PI * 2, true);
ctx.stroke();

ctx.moveTo(200,225);
ctx.arc(200,225, 15, 0, Math.PI * 2, true);
ctx.stroke();


ctx.moveTo(350, 225);
ctx.fillStyle ='white';
ctx.arc(350,225, 15, 0, Math.PI * 2, true);
ctx.stroke();

ctx.moveTo(330, 320);
ctx.arc(275,320, 65, 0, Math.PI , false);
ctx.stroke();



External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.