JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="C" width="200" height="200" style="width:300px; height:100px; border:1px solid black"></canvas>

JavaScript

$canvas=$('#C')

lineWidth=10

radius=100    -lineWidth/2;  // so the circle is 200 in diameter

context=$canvas[0].getContext('2d')
context.beginPath();
context.arc($canvas[0].width/2, $canvas[0].height/2, radius, 0, 6.29, false);
context.fillStyle = 'blue';
context.fill();
context.lineWidth = lineWidth;
context.strokeStyle = '#113388';
context.stroke();