<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#myCanvas{
border: 1px solid black;
background: beige;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="600"></canvas>
<script>
// Get the canvas element
let myCanvas=document.getElementById('myCanvas');
// get the context (pen) through the canvas element
let ctx=myCanvas.getContext("2d");
// right of the white semicircle
ctx.fillStyle= "#fff";
ctx.beginPath ();
ctx.arc(300,300,100,(Math.PI/180)*270,(Math.PI/180)*90);
ctx.fill();
// left black circle
ctx.fillStyle="#000";
ctx.beginPath ();
ctx.arc(300,300,100,(Math.PI/180)*270,(Math.PI/180)*90,true);
ctx.fill();
// left small round white
ctx.fillStyle="#fff";
ctx.beginPath ();
ctx.arc(300,250,50,(Math.PI/180)*270,(Math.PI/180)*90,true);
ctx.fill();
// the right of a small round black
ctx.fillStyle="#000";
ctx.beginPath ();
ctx.arc(300,350,50,(Math.PI/180)*270,(Math.PI/180)*90);
ctx.fill();
// black dots
ctx.fillStyle="#000";
ctx.beginPath ();
ctx.arc(300,250,5,0,Math.PI*2);
ctx.fill();
// small white dots
ctx.fillStyle="#fff";
ctx.beginPath ();
ctx.arc(300,350,5,0,Math.PI*2);
ctx.fill();
</script>
</body>
</html>