8. Canvas

8/10

8. 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.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.

Note:

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 provide two possible context 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

draw on screen

Hints:

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.