Canvas | Basic Animations

Learning Goals

After this lesson you will be able to:

• Create animations using canvas
• Understand different ways to schedule the updates
• Learn how to move elements on the canvas
• Understand how to move elements from user interactions
• Learn how to loop over an image to create awesome backgrounds :wink:

Introduction

Nous avons apris à dessiner programmatiquement dans une zone <canvas>. C'est plus compliqué que d'utiliser Photoshop. Mais par contre, l'avantage est que l'on va pouvoir animer notre dessin.

Since we're using JavaScript to control <canvas> elements, it's also very easy to make (interactive) animations. In this lesson, we will take a look at how to do some basic animations.

Probably the biggest limitation is, that once a shape gets drawn, it stays that way. If we need to move it we have to redraw it and everything that was drawn before it. It takes a lot of time to redraw complex frames and the performance depends highly on the speed of the computer it's running on.

Animations Steps

When doing animations on canvas, we have a set of frames that the canvas will render sequentially to create the ilusion of an animation. Each of these steps are represented in canvas by the concept of States.

Pour dessiner une balle qui bouge nous allons donc devoir dessiner chacune des frames d'animation :

In order to draw new frames, we have 4 mandatory steps we need to take:

1. Save canvas state
   If you are changing any setting (such as styles, transformations, etc.) which affect the canvas state and you want to make sure the original state is used each time a frame is drawn, you need to save that original state.
2. Clear the canvas
   Unless the shapes you will be drawing fill the complete canvas (for instance a backdrop image), you need to clear any shapes that have been drawn previously. The easiest way to do this is using the clearRect() method.
3. Draw animated shapes
   The step where you do the actual frame rendering.
4. Restore the canvas state
   If you've saved the state, restore it before drawing a new frame.

Save and Restore Canvas State?

Canvas states are stored on a stack. Every time the save() method is called, the current drawing state is pushed onto the stack. A drawing state consists of:

• The transformations that have been applied (i.e. translate, rotate and scale).
• The current values of the following attributes: strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline, direction, imageSmoothingEnabled.
• The current clipping path, which we'll see in the next section.

You can call the save() method as many times as you like. Each time the restore() method is called, the last saved state is popped off the stack and all saved settings are restored.

Controlling our Animations

Shapes are drawn to the canvas by using the canvas methods directly or by calling custom functions. In normal circumstances, we only see these results appear on the canvas when the script finishes executing.

For instance, it isn't possible to do an animation from within a for loop.

That means we need a way to execute our drawing functions over a period of time.

Scheduling updates

Par ex :

var x = 0;

function drawFrame() {
  ctx.clearRect(0,0, 500,500);
  
  x++;
  
  ctx.beginPath();
  ctx.arc(50+x,100, 50, 0,2*Math.PI);
  ctx.fill();
}

Pour animer notre rond, nous allons :

• incrémenter x
• appeler drawFrame()

Nous allons donc pouvoir utiliser setInterval:

setInterval(function () {
  x += 1;
  drawFrame();
}, 1000/24)

Ou bien nous pourrions aussi utiliser setTimeout()

function anim() {
  x += 1;
  drawFrame();
  
  setTimeout(anim, 1000/24);
}
anim();

First there's the window.setInterval(), window.setTimeout(), and window.requestAnimationFrame() functions, which can be used to call a specific function over a set period of time.

setInterval(method, delay)
// Starts repeatedly executing the function specified by method every delay milliseconds.

setTimeout(method, delay)
// Executes the function specified by function in delay milliseconds.

requestAnimationFrame()

Le problème avec setInterval et setTimeout c'est qu'elles ne vont pas être optimisées pour de l'animation. Notre animation risque de lagguer !

On va donc plutôt utiliser requestAnimationFrame :

function anim() {
  x += 1;
  drawFrame();
  
  requestAnimationFrame(anim);
}
requestAnimationFrame(anim);

requestAnimationFrame(callback)
// 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 repaint.

The window.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 repaint. The method takes as an argument a callback to be invoked before the repaint.

requestAnimationFrame va demander au navigateur, quand il aura du temps, d'éxécuter anim.

You should call this method whenever you're ready to update your animation onscreen. This will request that your animation function be called before the browser performs the next repaint. The number of callbacks is usually 60 times per second, but will generally match the display refresh rate in most web browsers as per W3C recommendation.

Your callback routine must itself call requestAnimationFrame() if you want to animate another frame at the next repaint.

Example

Let´s see an example to better understand how can we update our canvas element. In the following example, we will change the color of the square we draw.

It may seem that we are just changing the fillColor but actually, we are redrawing everything. First, we clear the canvas using the clearRect() method, and the draw again our square giving a random color to the fillRect() method.

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,150);
var color = {
  red:   Math.floor(Math.random()*255),
  green: Math.floor(Math.random()*255),
  blue:  Math.floor(Math.random()*255),
  rgb: function() {
    return "rgb(" + this.red + "," + this.green + "," + this.blue + ")"
  }
}

function updateCanvas(){
  //  color.red   = (color.red+1) % 255
  color.blue  = (color.blue+1) % 255
  // color.green = (color.green+1) % 255

  ctx.clearRect(0,0,480,270);
  ctx.fillStyle = color.rgb();
  ctx.fillRect(0,0,150,150);
  window.requestAnimationFrame(updateCanvas);
}

window.requestAnimationFrame(updateCanvas);

Moving elements

Now we know how to update our canvas, let´s try to move an element inside it. For moving an element we will add(or subtract, depending the direction we want to move our element) a certain quantity depending on the speed we want to set to the elements.

On the following example, we will move 3 elements, each of them in with a specific "speed". Let´s do it step by step:

1. First, let´s create store our canvas element and set the context. Then we will create three red squares, located in different coordinates of our canvas. Also, we are going to create three variables to control the speeds of our elements.

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(100,0,50,50);
ctx.fillRect(300,0,50,50);
ctx.fillRect(500,0,50,50);
var speed1 = 0;
var speed2 = 0;
var speed3 = 0;

2. Then let´s create a function to clear our canvas each time we refresh it. This way we have a cleaner code inside our updateCanvas() function.

function clearCanvas() {
  ctx.clearRect(0,0,700,450);
}

3. Finally, let create our updateCanvas() function, where we increment the speed of our elements in three differents quantities, this way we will get various speeds. Don´t forget we need to call out window.requestAnimationFrame(updateCanvas) method, so our canvas updates.

function updateCanvas(){
  speed1 += 1;
  speed2 += 2;
  speed3 += 3;
  clearCanvas();
  ctx.fillRect(100,speed1,50,50);
  ctx.fillRect(300,speed2,50,50);
  ctx.fillRect(500,speed3,50,50);
  window.requestAnimationFrame(updateCanvas);
}

window.requestAnimationFrame(updateCanvas);

Your turn

Go ahead and make the elements move in the opposite direction, that means, from bottom to the top of the canvas. You can choose the speed! 🏎️

🏋🏾‍♂️
Créer une animation d'un rectangle 50x30 allant du bord droit d'un canvas de 400x300 au bord gauche.

Controlling the elements with User interaction

Updating the canvas, moving elements… we are becoming experts on this! :wink:

To develop our games we will need some user interaction. We will now learn how can we make our elements follow user's actions.

Pacman Project - Intro to AI @ UC Berkeley

We will move one of the Pacman´s enemies in the following example. Notice that in this example, we call the update function every time somebody presses a key in the keyboard.

Let´s do it step by step:

1. Create our canvas and set the 2d context. We will add some captions to know the exact coordinates our ghost is located, that way we also declare fillStyle and font properties.

var canvas = document.getElementById("canvas");
var ctx    = canvas.getContext("2d");
ctx.fillStyle = 'white';
ctx.font = '18px serif';

2. Now we are going to create our ghost object. It should have x and y properties in order to place it on the canvas. Besides, we will add some functions to move it according to the user interaction with the keyboard. Each function will add or subtract from x or y axis.

class Ghost {
  constructor() {
    this.x = 25;
    this.y = 25;
    
    // Load the image
    var img = document.createElement('img');
    img.onload = () => {
      // Once image loaded => draw
      this.img = img;
      this.draw();
    };
    img.src = "https://media.giphy.com/media/Qr8JE9Hvi7ave/200.gif";
  }
  moveUp() {
    this.y -= 25;
  }
  moveDown() {
    this.y += 25;
  }
  moveLeft() {
    this.x -= 25;
  }
  moveRight() {
    this.x += 25;
  }
  draw() {
    ctx.drawImage(this.img, this.x, this.y, 50, 50);
  }
}

var ghost = new Ghost();

L6, expliquer le chargement de l'image.

3. Ok, our ghost is created, so let´s add the listeners for keys, so we can call our functions to move the ghost.

document.onkeydown = function(e) {
  switch (e.keyCode) {
    case 38: ghost.moveUp();    console.log('up',    ghost); break;
    case 40: ghost.moveDown();  console.log('down',  ghost); break;
    case 37: ghost.moveLeft();  console.log('left',  ghost); break;
    case 39: ghost.moveRight(); console.log('right', ghost); break;
  }
  updateCanvas();
}

5. Finally, we will need our updateCanvas() function, where we clear our canvas and redraw the element.

Notice that we are displaying our Ghost position x and y so we can check how it updates with every arrow key clicked!

function updateCanvas() {
  ctx.clearRect(0,0,1500,1700);
  ctx.fillText("Ghost_x: " + ghost.x, 580,40);
  ctx.fillText("Ghost_y: " + ghost.y, 580,60);
  
  ghost.draw()
}

In the following CodePen you have all the code we just explain, go ahead and take a look of our ghost moving! :wink:

Your turn

We may want to restart everything, putting the ghost on it initial position. Let´s do it using the spacebar key.

Go ahead and add the functionality in the codePen. When somebody clicks on the spacebar our ghost should return to the position (50,50).

Infinite looping an Image

When rendering a 2d game, usually we need a background image that moves while our character or element is moving through the canvas.

Think about a game like SuperMario Bros and notice there was an infinite background like the following:

Using canvas we can use a panoramic image and loop infinitely over it to be able to show the whole image. Check the codePen and see how we can do this using canvas and image.

Expliquer le trick d'afficher 2 images.

Summary

Now canvas get a lot more interesting for our game project huh? We just learn how to animate elements, schedule the animations and make them interactive with users.

Best way to turn an expert on animations is practice, so feel free to keep playing with codePens or create ones by yourself! :muscle:

Extra Resources

• Game Canvas Components