JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="300" height="486" id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
          var context = canvas.getContext("2d");

         context.beginPath();
         context.rect(200, 200, 50, 50);
    
         context.fillStyle = "black";
         context.fill();
         context.lineWidth = 5;
         context.strokeStyle = "black";
         context.stroke();
         context.closePath();

context.beginPath();            
          context.arc(100, 100, 30, 1.1 * Math.PI, 1.9 * Math.PI, false);
          context.lineWidth = 5;
          context.strokeStyle = "blue";
          context.stroke();