JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="800" height="500"></canvas>
<script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 1;
      var radius = 50;
      var startAngle = 1 * Math.PI;
      var endAngle = 2 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 15;

      // line color
      context.strokeStyle = 'black';
      context.stroke();
    </script>
<script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.rect(390, 400, 20, 70);
      context.fillStyle = 'grey';
      context.fill();
      context.lineWidth = 7;
      context.strokeStyle = 'black';
      context.stroke();
    </script>

CSS

body {
        margin: 0px;
        padding: 0px;
}