HTML Canvas Trying to create an animated chain of rectangle with slight delay/distance between them

Question

HTML Canvas Trying to create an animated chain of rectangle with slight delay/distance between them

520 Views Asked by Simon Duchaine At 03 April 2025 at 06:57

I am trying to create multiple animated rectangles using Html Canvas with requestAnimationFrame. As for now, I managed to do exactly what I wanted with only one animated rectangle, but I can't find out how to create more rectangles that would simply be in line and follow each other with an equal distance.

Also, there's a random data (I, II or III) inside each rectangle.

Here's my actual code:

//Referencing canvas
    var canvas = document.getElementById("my-canvas");
  var ctx = canvas.getContext("2d");


    //Make Canvas fullscreen and responsive
     function resize() {
   canvas.width = window.innerWidth;
   canvas.height = window.innerHeight;
  }
  window.addEventListener('resize', resize, false); resize();
  
  //FPS
  var framesPerSecond = 60;

  //Default Y pos to center;
  var yPos = canvas.height / 2;
  //Default X pos offset
  var xPos = -150;

  //Speed (increment)
  var speed = 2;

  //Our array to store rectangles objects
  var rectangles = [] ;

  //Dynamic Number from database
  var quote = ["I", "II", "III"];

  //Random number for testing purpose
  var rand = quote[Math.floor(Math.random() * quote.length)];


  //Draw Rectangle
  function drawRectangle () {

   setTimeout(function() {
           requestAnimationFrame(drawRectangle); 


    ctx.clearRect(0, 0, canvas.width, canvas.height);

    //Background color
    ctx.fillStyle = "yellow";
    //Position, size.
    var rectWidth = 70;
    var rectHeigth = 55;
    ctx.fillRect(xPos,yPos,rectWidth,rectHeigth);

    ctx.font = "32px Arial";
    ctx.textAlign = "center"; 
    ctx.textBaseline = "middle";
    ctx.fillStyle = "black";

    //Data Layer
    var dataLayer = ctx.fillText(rand,xPos+(rectWidth/2),yPos+(rectHeigth/2));


    xPos += speed;
  
     //Infinite loop for test
      if (xPos > 1080) {
        xPos = -150;
      }

        }, 1000 / framesPerSecond);

  }

  drawRectangle ();

canvas {background-color: #131217}

body { margin: 0; overflow: hidden; }

<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="utf-8">
    <title>Moving Blocks</title>

    <style>

     canvas {background-color: #131217}

     body { margin: 0; overflow: hidden; }

    </style>
    
  </head>


  <body>

   <canvas id="my-canvas"></canvas>
    
  </body>


</html>

Original Q&A

There are 1 best solutions below

**Blindman67** · Accepted Answer

Animating arrays of objects.

For animations you are best of using a single render function that renders all the objects once a frame, rather than create a separate render frame per object.

As for the squares there are many ways that you can get them to do what you want. It is a little difficult to answer as what you want is not completely clear.

This answer will use a rectangle object that has everything needed to be rendered and move. The rectangles will be kept in an array and the main render function will update and render each rectangle in turn.

There will be a spawn function that creates rectangles untill the limit has been reached.

// constants up the top
const quote = ["I", "II", "III"];
// function selects a random Item from an array
const randItem = (array) => array[(Math.random() * array.length) | 0];

// array to hold all rectangles
const rectangles = [];
var maxRectangles = 20;
const spawnRate = 50; // number of frames between spawns
var spawnCountdown = spawnRate;

//Referencing canvas
const ctx = canvas.getContext("2d");
var w, h; // global canvas width and height. 
resizeCanvas(); // size the canvas to fit the page

requestAnimationFrame(mainLoop); // this will start when all code below has been run
function mainLoop() {
  // resize in the rendering frame as using the resize
  // event has some issuse and this is more efficient.
  if (w !== innerWidth || h !== innerHeight) {
    resizeCanvas();
  }
  ctx.clearRect(0, 0, w, h);
  spawnRectangle(); // spawns rectangles
  updateAllRectangles(); // moves all active rectangles
  drawAllRectangles(); // I will let you gues what this does... :P

  requestAnimationFrame(mainLoop);
}

function resizeCanvas() {
  w = canvas.width = innerWidth;
  h = canvas.height = innerHeight;

  // and reset any canvas constants
  ctx.font = "32px Arial";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
}

// function to spawn a rectangle
function spawnRectangle() {
  if (rectangles.length < maxRectangles) {
    if (spawnCountdown) {
      spawnCountdown -= 1;
    } else {
      rectangles.push(
        createRectangle({
          y: canvas.height / 2, // set at center
          text: randItem(quote),
          dx: 2, // set the x speed
        })
      );
      spawnCountdown = spawnRate;
    }
  }
}


// define the default rectangle

const rectangle = {
  x: -40, // this is the center of the rectangle
  y: 0,
  dx: 0, // delta x and y are the movement per frame
  dy: 0,
  w: 70, // size
  h: 55,
  color: "yellow",
  text: null,
  textColor: "black",
  draw() { // function to draw this rectangle
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x - this.w / 2, this.y - this.h / 2, this.w, this.h);
    ctx.fillStyle = this.textColor;
    ctx.fillText(this.text, this.x, this.y);
  },
  update() { // moves the rectangle
    this.x += this.dx;
    this.y += this.dy;
    if (this.x > canvas.width + this.w / 2) {
      this.x = -this.w / 2;
      // if the rectangle makes it to the other
      // side befor all rectangles are spawnd
      // then reduce the number so you dont get any
      // overlap
      if (rectangles.length < maxRectangles) {
        maxRectangles = rectangles.length;
      }
    }
  }
}

// creats a new rectangle. Setting can hold any unique
// data for the rectangle
function createRectangle(settings) {
  return Object.assign({}, rectangle, settings);
}

function updateAllRectangles() {
  var i;
  for (i = 0; i < rectangles.length; i++) {
    rectangles[i].update();
  }
}

function drawAllRectangles() {
  var i;
  for (i = 0; i < rectangles.length; i++) {
    rectangles[i].draw();
  }
}

canvas {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #131217;
}

body {
  margin: 0;
  overflow: hidden;
}

<canvas id="canvas"></canvas>

HTML Canvas Trying to create an animated chain of rectangle with slight delay/distance between them

There are 1 best solutions below

Animating arrays of objects.

Related Questions in JAVASCRIPT

Related Questions in ANIMATION

Related Questions in CANVAS

Related Questions in REQUESTANIMATIONFRAME

Trending Questions

Popular # Hahtags

Popular Questions