JSFiddle - React, Tailwind, and code Playground

by totoromaum

HTML

<!DOCTYPE html>
<html>

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

  <body>
    <canvas id="canvas" width="1000" height="1000"></canvas>
    <script>
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      var circle = function(x, y, radius, fillCircle) {
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2, false);
        if (fillCircle) {
          ctx.fill();
        } else {
          ctx.stroke();
        }
      };

      var drawBee = function(x, y) {
        ctx.lineWidth = 2;
        ctx.strokeStyle = "Black";
        ctx.fillStyle = "Gold";

        circle(x, y, 8, true);
        circle(x, y, 8, false);
        circle(x - 5, y - 11, 5, false);
        circle(x + 5, y - 11, 5, false);
        circle(x - 2, y - 1, 2, false);
        circle(x + 2, y - 1, 2, false);
      };
      drawBee(100,100);
    </script>

  </body>

</html>