Canvas

Canvas element is a container used to draw bitmap graphics. The canvas API provide basic primitive drawing such as rectangles, lines, arcs.

Basic usage

Create an HTML file containing a canvas tag <canvas> </canvas>

Consider the following JavaScript code and observe the resulting drawing on your screen.

"use strict";

// Creation of the canvas
const canvasElement = document.querySelector('canvas');
const ctx = canvasElement.getContext('2d');

// Size of the canvas
ctx.canvas.width = 600;
ctx.canvas.height = 600;

// Draw some rectangles
ctx.fillStyle = 'lightgray';
ctx.fillRect(0,0,600,600);

ctx.fillStyle = 'green';
ctx.fillRect(50,50,250,400);

ctx.fillStyle = 'yellow';
ctx.fillRect(100,150,50,50);

// Draw some lines
ctx.lineWidth = 2;
ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.moveTo(500,150);
ctx.lineTo(500,300);
ctx.lineTo(200,300);
ctx.lineTo(150,150);
ctx.stroke();

// Draw a circle
ctx.fillStyle = 'salmon';
ctx.beginPath();
ctx.arc(400,400,50,0,2*Math.PI);
ctx.fill();

Change some parameters such as position and colors of the various shapes, add new shapes, and make sure you understand the role of each command line.

• - The drawing is not called directly on the canvas, but on a Rendering Context ctx.
• - A Rendering Context can be seen as the method and environment needed to perform the rendering, i.e. how to fill the pixels of the image.
• - JavaScript provides two possible contexts for canvas:
• • - CanvasRenderingContext2D: the used in this case to draw 2D shapes.
  • - WebGLRenderingContext allowing to use the WebGL API to draw 3D graphics.
  • • So far, the use of WebGL will be outside of the scope of this class, but you may check Three.js: a simple to use library for 3D graphics using WebGL (ex. of tutorial).

Interaction with the user

Create a program allowing the user to draw on the window of your browser when pressing the mouse button as seen in the following example

• You can use the following code to set the size of your canvas to fill the window of the browser.

ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;

• You can consider a boolean drawing state parameter in coordination with the action associated with `mousedown`, `mouseup`, and `mousemove` such that
• • - `mousedown` activates the drawing state of your program and start a new path at the current cursor position.
  • - `mouseup` desactivates the drawing state of your program.
  • - `mousemove` generates a line to the current cursor position if you are in an activated drawing state.

Interface

Add an interface to your webpage in order to be able to set the color and width of your drawing, as well as the background color.

Sprites

We see in the following how to include sprites in your webpage.

Sprites correspond to a series of images depicting an animation, such as moving character, an explosion, etc.
Sprites are usually defined using only a few key images that are played in loop, and are very popular in 2D video game.

Example of sprites:

Sprites are often stored as consecutives small images in a bigger one. Displaying a sprite consist in drawing only a portion of the big image.

Consider the following code [link ]

So far only the portion of the bird.png corresponding to the first bird is displayed.
Note the use of ctx.drawImage with arguments allowing to set offset and dimension in the source (the original image), and destination (on the canvas).

Changing the offset in the source image allows to switch between a different portion. For instance, changing the drawImage call by this code will display the bird image of the 3rd column and 4th row.

ctx.drawImage(img_bird, 
2*w, 3*h, w, h,
0, 0, w, h  
); 

Finally every portion of the image can be displayed one after the other to generate an animation.
Consider for instance the following code

"use strict";

const canvasElement = document.querySelector('canvas');
const ctx = canvasElement.getContext('2d');

ctx.canvas.width = 1024;
ctx.canvas.height = 512;

const img_bird = new Image();
img_bird.src = "bird.png";
img_bird.onload = display_sprite;

let idx_bird = 0;  // index of the 
let offset_bird_x = 0;
let offset_bird_y = 0;

function display_sprite()
{
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

  idx_bird = idx_bird + 1; // pass to the next image
  // there is 22 bird images - go back to 0 after 
  if(idx_bird>=22){ 
    idx_bird = 0; 
  }
  // the (x,y)-offset of the current image
  const offset_x = idx_bird%5;
  const offset_y = Math.floor(idx_bird/5);

  const w = 240; // width
  const h = 314; // height
  ctx.drawImage(img_bird, 
    offset_x*w, offset_y*h, w, h, // source
    0, 0, w, h                    // destination
  ); 

  // Display animation
  window.requestAnimationFrame(display_sprite);
}

Exercise

Extend this code to model a moving character when the user presses on left/right keyboard keys.