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 circle = function(x, y, radius) {
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2, false);
        ctx.stroke();
      };
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.beginPath();
      ctx.lineWidth = 4;
      ctx.strokeStyle = "Red";
      circle(100, 100, 10);
      ctx.strokeStyle = "Orange";
      circle(100, 100, 20);
      ctx.strokeStyle = "Yellow";
      circle(100, 100, 30);
      ctx.strokeStyle = "Green";
      circle(100, 100, 40);
      ctx.strokeStyle = "Blue";
      circle(100, 100, 50);
      The canvas Element 213
      ctx.strokeStyle = "Purple";
      circle(100, 100, 60);
      ctx.stroke();

    </script>
  </body>

</html>