JSFiddle - React, Tailwind, and code Playground

by ourjs

HTML

<canvas id="example3" width="400" height="300"></canvas>

JavaScript

// get the canvas
var canvas = document.getElementById('example3');
var context = canvas.getContext('2d');
context.fillStyle = '#ff7700';
var time = false;
// box position
var x = -100;
// animation loop
var loop = function(){
  // get time since last frame
  var now = new Date().getTime();
  var d = now - (time || now);
  time = now; 
  // clear previously drawn rectangles
  context.clearRect(0, 0, canvas.width, canvas.height);
  // draw new rectangle
  context.fillRect(x, 100, 100, 100);
  // advance horizontal position
  x += 0.1 * d;
  // reset horizontal position
  if(x > canvas.width){
    x = -100;
  }  
  // request next frame
  requestAnimationFrame(loop);
};
// first frame
loop();