JavaScript

Canvas Animation

canvas {
  border: 3px solid steelblue;
}

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');

let xCoordinate = 0; const yCoordinate = 100;

const xIncrement = 5;

const boxWidth = 50, boxHeight = 50;

const drawBox = () => {
  context.clearRect(0, 0, canvas.width, canvas.height);

  context.fillStyle = 'deepskyblue';
  context.fillRect(xCoordinate, yCoordinate, boxWidth, boxHeight);

  xCoordinate += xIncrement;

  if (xCoordinate <= canvas.width - boxWidth) {
    requestAnimationFrame(drawBox);
  }
}

drawBox();