JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="c" width="410" height="300" />

JavaScript

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

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.arc(100, 100, 100, 90 * Math.PI / 180, 450 * Math.PI / 180);

ctx.fill();

ctx.beginPath();
ctx.moveTo(310, 100);
ctx.arc(310, 100, 100, 0 * Math.PI / 180, 360 * Math.PI / 180);

ctx.fill();