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 = 1;

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) {
    clearInterval(animationId);
  }
}

const animationId = setInterval(drawBox, 16);