Premières manipulations

La première chose à faire est d'insérer le canvas :

<p>Désolé, votre navigateur ne supporte pas Canvas. Mettez-vous à jour</p>

</canvas>

Dès que c'est fait, on accède au canvas :

var canvas = document.querySelector('#canvas');

var context = canvas.getContext('2d');

Une fois qu'on a le canvas, il faut accéder à ce qu'on appelle son contexte, avec getContext(). Il n'y a pour l'instant qu'un seul contexte disponible : la deux dimensions (2D). Il est prévu que les navigateurs gèrent un jour la 3D, mais ça reste expérimental à l'heure actuelle.

Principe de fonctionnement

Dessiner avec Canvas se fait par le biais de coordonnées. Le coin supérieur gauche du canvas est de coordonnées (0,0). Si on descend ou qu'on va vers la droite, on augmente les valeurs. Ça ne change finalement pas trop de ce qu'on connaît, par exemple pour le positionnement absolu en CSS.

On va utiliser les méthodes pour tracer des lignes et des formes géométriques.

Traçons un rectangle de 50 sur 80 pixels :

context.fillStyle = "gold";

context.fillRect(0, 0, 50, 80);

Nous avons tracé un rectangle en Javascript

Dans un premier temps, on choisit une couleur avec fillStyle, comme un peintre qui trempe son pinceau avant de commencer son tableau. Puis, avec fillRect(), on trace un rectangle. Les deux premiers paramètres sont les coordonnées du sommet supérieur gauche du rectangle que nous voulons tracer. Le troisième paramètre est la largeur du rectangle, et le quatrième est la hauteur. Autrement dit : fillrect(x, y, largeur, hauteur).

Si on veut centrer ce rectangle, il faut s’appliquer à quelques calculs pour spécifier les coordonnées :

context.fillRect(50, 35, 50, 80);

On recommence tout, et on centre le rectangle. Dès que c'est fait, on ajoute un carré de 40 pixels d'une couleur semi-transparente :

context.fillStyle = "gold";

context.fillRect(50, 35, 50, 80);

context.fillStyle = "rgba(23, 145, 167, 0.5)";

context.fillRect(40, 25, 40, 40);

La propriété fillStyle peut recevoir diverses valeurs : le nom de la couleur, un code hexadécimal (sans oublier le # devant), une valeur RGB, HSL ou HSLA ou, comme ici, une valeur RGBA. Dans le cas d'une valeur RGBA, le quatrième paramètre est l'opacité, définie sur une échelle de 0 à 1, le 0 étant transparent et le 1 opaque. Comme on peut le voir, le carré a été dessiné par-dessus le rectangle :

Un carré transparent apparaît sur le rectangle

Le fond et les contours

Nous avons créé des formes pleines, mais il est également possible de créer des formes creuses, avec juste un contour. Canvas considère deux types de formes : fill et stroke. Une forme fill est une forme remplie, comme nous avons fait précédemment, et une forme stroke est une forme vide pourvue d'un contour. Si pour créer un rectangle fill on utilise fillRect(), pour créer un rectangle stroke on va utiliser strokeRect() !

context.strokeStyle = "gold";

context.strokeRect(50, 35, 50, 80);

context.fillStyle = "rgba(23, 145, 167, 0.5)";

context.fillRect(40, 25, 40, 40);

Le rectangle est désormais matérialisé par un cadre jaune

Comme il s'agit d'un contour, il est possible de choisir l'épaisseur à utiliser. Cela se fait avec la propriétélineWidth :

context.lineWidth = "5";

context.strokeStyle = "gold";

context.strokeRect(50, 35, 50, 80);

context.fillStyle = "rgba(23, 145, 167, 0.5)";

context.fillRect(40, 25, 40, 40);

Effacer

Une dernière méthode existe en ce qui concerne les rectangles : clearRect(x, y, largeur, hauteur). Cette méthode agit comme une gomme, c'est-à-dire qu'elle va effacer du canvas les pixels délimités par le rectangle. Tout comme fillRect(), on lui fournit les coordonnées des quatre sommets. clearRect() est utile pour faire des découpes au sein des formes, ou tout simplement pour effacer le contenu du canvas.

context.strokeStyle = "gold";

context.strokeRect(50, 35, 50, 80);

context.fillStyle = "rgba(23, 145, 167, 0.5)";

context.fillRect(40, 25, 40, 40);

context.clearRect(45, 40, 30, 10);

Créé avec HelpNDoc Personal Edition: Générateur d'aide complet