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);
      var update = function(coordinate) {

        var offset = Math.random() * 4 - 2;
        coordinate += offset;

        if (coordinate > 200) {
          coordinate = 200;
        }

        if (coordinate < 0) {
          coordinate = 0;
        }

        return coordinate;
      };
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      var x = 100;
      var y = 100;
      setInterval(function() {
        ctx.clearRect(0, 0, 1000, 1000);
        drawBee(x, y);
        x = update(x);
        y = update(y);
        ctx.strokeRect(0, 0, 1000, 1000);
      }, 30);
      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);
       ...