JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="500" height="300"></canvas>

CSS

canvas {
  border:1px solid black;
}

JavaScript

var canvas = document.querySelector("#myCanvas");
  var crc2 = canvas.getContext("2d");
  
  /*circle*/
  crc2.beginPath();
  crc2.arc(250, 150, 50, 0, Math.PI * 2);
  crc2.fillStyle = "#0000ff"
  crc2.fill();
  crc2.strokeStyle="#bb0000"
  crc2.stroke();
  crc2.closePath();
  
  /*rectangle*/
  crc2.beginPath();
  crc2.rect(200, 200, 100, 20);
  crc2.fillStyle = "#00ff00"
  crc2.fill();
  crc2.strokeStyle="#bb0000"
  crc2.stroke();
  crc2.closePath();
  
  /*line*/
  crc2.beginPath();
  crc2.moveTo(175, 150);
  crc2.lineTo(250, 75);
  crc2.lineTo(325, 150);
  crc2.strokeStyle = "#000";
  crc2.stroke();
  crc2.fillStyle = "#cccccc";
  crc2.fill();