JSFiddle - React, Tailwind, and code Playground

by Pablo_No

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Canvas2-Bug</title>
  </head>
  <body>
    <canvas id="animation" width="300" height="300"></canvas>
  </body>
</html>

CSS

canvas {
  border: 1px solid black;
}

JavaScript

var canvas = document.getElementById('animation');
      var ctx = canvas.getContext('2d');
      var startTime;
      var elapsed;
      var oldTimeStamp;
      var interval;
      function createBox(x, y, width, height, vx, vy, color) {
        this.x = x
        this.y = y
        this.width = width
        this.height = height
        this.vx = vx
        this.vy = vy
        this.color = color
        this.draw = function () {
          ctx.fillStyle = this.color
          ctx.fillRect(
            Math.max(Math.min(this.x, canvas.width-this.width), 0),
            Math.max(Math.min(this.y, canvas.height-this.height), 0),
            this.width,
            this.height
          );
        }
      }
      var red = new createBox(0, 0, 50, 75,  0.1, 0.2, "gray")
      function step(timeStamp) {
        // Time
        if (startTime === undefined) {
          startTime = timeStamp
          oldTimeStamp = timeStamp
        }
        elapsed = timeStamp - startTime;
        interval = timeStamp - oldTimeStamp
        
        oldTimeStamp = timeStamp
        // Draw
        ctx.fillStyle = 'rgba(255, 255, 255, 1)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        if (red.y + red.vy > canvas.height-red.height || red.y + red.vy < 0) {
          red.vy = -red.vy;
        }
        if (red.x + red.vx > canvas.width-red.width || red.x + red.vx < 0) {
          red.vx = -red.vx;
        }
        red.x = red.x + red.vx * interval

        red.y = red.y + red.vy * interval
        red.draw()
        // Request new animation frame
        window.requestAnimationFrame(step);
      }
      window.requestAnimationFrame(step);