JavaScript

Canvas

Raconté par Arnaud de Mesmay sur la base d'un cours créé par Rémi Forax et Vincent Jugé.

Historique des versions

La spécification est en 2 parties :

un élément canvas
un objet context 2D

HTML 5 Canvas	2014
Context 2D	2015

L'API Canvas

permet de dessiner avec JavaScript sur un canvas HTML.

                    
<canvas id="canvas-example1"
        width="300"
        height="180"></canvas>

const canvas = document.getElementById('canvas-example1');
const context = canvas.getContext("2d");
context.strokeRect(50, 25, 75, 35);
context.strokeRect(75, 50, 100, 60);

Un canvas est vu comme une image sur laquelle on peut dessiner.

Le context 2D

On récupère l'élément Canvas par son nom
puis on demande le contexte de dessin 2D pour dessiner.

context.fillStyle = "tomato";
context.fillRect(100, 50, 100, 100);

Il existe aussi un context 3D, défini par la specification WebGL.

Les coordonnées

Le point (x = 0, y = 0) est en haut à gauche.

x : coordonnée sur l'axe horizontal (vers la droite)
y : coordonnée sur l'axe vertical (vers le bas)

context.fillStyle = "violet";
context.fillRect(0, 0, 100, 100);

L'état du context

La façon d'afficher dépend de l'état de propriétés du context.

context.strokeStyle = "blue";
context.strokeRect(150, 25, 100, 100);
context.strokeStyle = "red";
context.strokeRect(100, 50, 100, 100);

Par exemple, l'affichage de la couleur du bord d'un rectangle dépend de la propriété stokeStyle.

Couleur

Les couleurs sont les mêmes que les couleurs de CSS.

context.fillStyle = "rgb(255, 0, 0)";
context.fillRect(25, 50, 100, 100);
context.fillStyle = "#00A0A0";
context.fillRect(150, 50, 100, 100);

Gradient linéaire

On définit un gradient linéaire par deux points (x1, y1) (x2, y2) puis plusieurs couleurs (color stops) sur une échelle entre 0 et 1.

const gradient = context.createLinearGradient(
                   50, 50,
                   200, 200);
gradient.addColorStop(0, "rgb(255, 0, 0)");
gradient.addColorStop(0.75, "white");
gradient.addColorStop(1, "blue");
context.fillStyle = gradient;
context.fillRect(50, 50, 150, 150);

Gradient circulaire

On définit un gradient circulaire par 2 cercles (x1, y1, r1) (x2, y2, r2).

const gradient = context.createRadialGradient(
                   125, 125, 10,
                   130, 130, 50);
gradient.addColorStop(0, "#A0FF00");
gradient.addColorStop(0.75, "#00A064");
gradient.addColorStop(1, "#00A064");
context.fillStyle = gradient;
context.fillRect(50, 50, 150, 150);

opérations sur un canvas

Afficher un texte
Afficher une figure simple
Afficher des figures complexes
Afficher une image
Gestion des événements

Afficher un texte

stroke = trait
fill = remplissage

context.strokeStyle = "gray";
context.fillStyle = "red";
context.font = "40px Arial";
context.strokeText("Hello World", 20, 50);
context.fillText("Hello World", 20, 100);

On peut faire des effets d'ombre en dessinant avec un décalage d'1 ou 2 pixels.

Afficher un rectangle

stroke = trait
fill = remplissage

context.strokeStyle = "blue";
context.strokeRect(50, 50, 100, 50);
context.fillStyle = "red";
context.fillRect(100, 75, 100, 50);

Afficher une ligne

moveTo déplace le crayon, lineTo place une ligne,
beginPath indique le début d'un chemin, stroke dessine.

context.strokeStyle = "orange";
context.lineWidth = 7;
context.beginPath();
context.moveTo(50, 50);
context.lineTo(150, 150);
context.lineTo(250, 50);
context.stroke();

Style d'une ligne

context.strokeStyle = "fuchsia";
context.lineWidth = 7;
context.lineCap = "round";
context.lineJoin = "bevel";
context.beginPath();
context.moveTo(50, 50);
context.lineTo(150, 150);
context.lineTo(250, 50);
context.stroke();

lineWidth:: épaisseur du trait
lineCap: butt | round | square: bout des lignes
lineJoin: bevel | round | miter: jointure entre les lignes

Afficher un cercle/ellipse

arc(x, y, radius, startAngle, endAngle)
Les angles sont en radians !

context.font = "14px arial";
for(let i = 0; i < 4; i++) {
  context.strokeText((i + 1) + " PI / 2", 
		     45 + 50 * i, 27 + 45 * i);
  context.beginPath();
  context.arc(10 + 50 * i, 20 + 45 * i,
	      20, 0, (i + 1) * Math.PI / 2);
  context.stroke();
}

Le point d'angle 0 est au centre à droite et on tourne dans le sens des aiguilles d'une montre.

Tableau de pixels

getImageData() renvoie un tableau de pixels.

const imageData = context.getImageData( 0, 0, canvas.width, canvas.height); const array = imageData.data; for(let y = 0; y < canvas.height; y++) { for(let x = 0; x < canvas.width; x++) { const i = (x + y * canvas.width) * 4; array[i] = Math.floor(255 * x / canvas.width); // red array[i+1] = 128; // green array[i+2] = Math.floor(255 * y / canvas.height); // blue array[i+3] = 255; // alpha } } context.putImageData(imageData, 0, 0);

Chaque pixel est composé de quatre cases rouge, verte, bleue, alpha (opacité).

Tableau de pixels (2)

putImageData() copie le tableau de pixels dans le canvas.

const imageData = context.getImageData( 0, 0, canvas.width, canvas.height); const array = imageData.data; for(let i = 0; i < array.length; i = i + 4) { const y = i / 4 / canvas.width; const x = i / 4 % canvas.width; array[i] = Math.floor(255 * x / canvas.width); // red array[i+1] = 128; // green array[i+2] = Math.floor(255 * y / canvas.height); // blue array[i+3] = 255; // alpha } context.putImageData(imageData, 0, 0);

Version avec une seule boucle

Afficher une image (1/3)

Il faut que l'image soit chargée avant de pouvoir la dessiner
si l'image est déjà dans la page, pas de problème…

const image = document.getElementById("image-html5");
for(let i = 0; i < 3; i++) {
  context.drawImage(image, 10 + i * 75, 10 + i * 30);
}

Afficher une image (2/3)

Si l'image n'est pas chargée, image.onload est appelée lorsque l'image est chargée.

const image = new Image();
const letUsDrawTheImages = function() {
  for(let i = 0; i < 3; i++) {
    context.drawImage(image, 10 + i * 75, 70 - i * 30);
  }
}
image.onload = letUsDrawTheImages;
image.src = "images/js-canvas/html5.png";

Afficher une image (3/3)

On peut spécifier onload en utilisant une closure, ce qui évite de devoir trouver un nom à la fonction.

const image = new Image();
image.onload = function() {
  for(let i = 0; i < 3; i++) {
    context.drawImage(image, 10 + i * 75, 20 + Math.abs(i - 1) * 30);
  }
};
image.src = "images/js-canvas/html5.png";

C'est une closure car les variables context et image sont prises du scope englobant !

Un exemple

Voici un exemple de ce qu'on peut faire en combinant des classes, des évènements et le canvas. C'est un bon exercice de plonger dans le code source et de comprendre comment tout s'imbrique ensemble.