SOURCE

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//var grd=ctx.createRadialGradient(95,50,2,90,60,100);
//ctx.fillStyle = 'red';
//ctx.fillRect(0,0,200,100);
/*ctx.moveTo(0,0);
ctx.lineTo(100,50);
ctx.stroke();
ctx.moveTo(200,0);
ctx.lineTo(100,50);
ctx.stroke();*/
ctx.beginPath();
ctx.arc(250,250,150,0,2*Math.PI);
ctx.fillStyle="red";
ctx.fill();
ctx.stroke();

ctx.beginPath();
ctx.arc(250,250,90,0,2*Math.PI);
ctx.fillStyle="red";
ctx.fill();
ctx.stroke();

ctx.beginPath();
ctx.arc(180,200,20,0,2*Math.PI);
ctx.fillStyle="black";
ctx.fill();
ctx.stroke();

ctx.beginPath();
ctx.arc(320,200,20,0,2*Math.PI);
ctx.fillStyle="black";
ctx.fill();
ctx.stroke();

ctx.beginPath();
ctx.arc(250,340,20,0,2*Math.PI);
ctx.fillStyle="black";
ctx.fill();
ctx.stroke();



ctx.beginPath();
ctx.arc(250,250,35,0,2*Math.PI);
ctx.fillStyle="#000000";
ctx.fill();
ctx.stroke();
/*
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
*/

<canvas id="myCanvas" width="500" height="500"></canvas>
        

canvas {
  border: 1px solid #ffffff;

}