JSFiddle - React, Tailwind, and code Playground

by totoromaum

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Canvas</title>
  </head>

  <body>
    <canvas id="canvas" width="1000" height="10000"></canvas>
    <script>
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "Red";
      ctx.fillRect(0, 0, 1000, 10000)
      ctx.strokeStyle = "Yellow";
      ctx.lineWidth = 4;
      ctx.strokeRect(40, 20, 20, 20);
      ctx.strokeStyle = "Yellow";
      ctx.lineWidth = 4;
      ctx.strokeRect(50, 40, 1, 60);
      ctx.beginPath();
      ctx.moveTo(50, 60);
      ctx.lineTo(20, 40);
      ctx.stroke();
      ctx.beginPath();
      ctx.moveTo(80, 40);
      ctx.lineTo(50, 60);
      ctx.stroke();
      ctx.beginPath();
      ctx.moveTo(50, 100);
      ctx.lineTo(20, 140);
      ctx.stroke();
      ctx.beginPath();
      ctx.moveTo(90, 130);
      ctx.lineTo(50, 100);
      ctx.stroke();
      ctx.beginPath();
      ctx.lineWidth = 4;
      ctx.strokeStyle = "Green";
      ctx.arc(50, 50, 20, 0, Math.PI / 2, false);
      ctx.stroke();
      ctx.lineWidth = 2;
      ctx.strokeStyle = "Green";

    </script>
  </body>

</html>