How to Get Started with HTML5 Canvas Animation

HTML5 canvas animation may require the use of requestAnimationFrame(). From MDN: The requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation before the next browser repaint.

The animate() function is called recursively by requestAnimationFrame(), to create an indefinite loop. At each call the update() method is invoked for each instance in an array of arc circles. The update() method updates the position of the circle by redefining the x and y coordinates. The animate() function also clears the canvas on each update.

JavaScript

function animate() {
  requestAnimationFrame(animate);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < circleArray.length; i++) {
    circleArray[i].update();
  }
}

The circles are generated from a class.

JavaScript

function Circle(x, y, dx, dy, radius) {
  this.x = x;
  this.y = y;
  this.dx = dx;
  this.dy = dy;
  this.radius = radius;

  this.draw = function () {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    ctx.strokeStyle = "white";
    ctx.lineWidth = 3;
    ctx.stroke();
  };

  this.update = function () {
    if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
      this.dx = -this.dx;
    }
    if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
      this.dy = -this.dy;
    }
    this.x += this.dx;
    this.y += this.dy;
    this.draw();
  };
}

const circleArray = [];

for (let i = 0; i < 100; i++) {
  let radius = 40;
  let x = Math.random() * (canvas.width - radius * 2) + radius;
  let y = Math.random() * (canvas.height - radius * 2) + radius;
  let dx = (Math.random() - 0.5) * 4;
  let dy = (Math.random() - 0.5) * 4;

  circleArray.push(new Circle(x, y, dx, dy, radius));
}

A lot going on here. The Circle class has five parameters, which define the position and size of the circle instance. X and y are the position in the canvas space. Dx and dy are the direction ( negative or positive ) and velocity ( expressed as an integer ) of the circle.

Circle class methods include draw() and update(). The draw method uses the canvas 2d context methods to draw an arc into the HTML canvas. The update() method animates ( increments ) the position of the circle based on the direction / velocity parameter.

JavaScript

const circleArray = [];

for (let i = 0; i < 100; i++) {
  let radius = 40;
  let x = Math.random() * (canvas.width - radius * 2) + radius;
  let y = Math.random() * (canvas.height - radius * 2) + radius;
  let dx = (Math.random() - 0.5) * 4;
  let dy = (Math.random() - 0.5) * 4;

  circleArray.push(new Circle(x, y, dx, dy, radius));
}

Here we create 100 instances of Circle and assign "random" values to the parameters.

JavaScript

animate()

The animate function implements requestAnimationFrame() as described at the top of the article.

Find the HTML for this project here. View the document source to see the code.