canvas est un élément qui va servir de conteneur et au sein duquel on va pouvoir dessiner toutes sortes de graphiques en utilisant le JavaScript.
On va pouvoir dessiner au sein d’un élément canvas en utilisant les propriétés et méthodes fournies par l’API JavaScript Canvas ou en utilisant celles de l’API WebGL.
La différence principale entre ces deux API réside dans le fait que Canvas est centré autour du dessin 2D tandis que WebGL va plutôt être utilisé pour du 3D. Dans ce cours, nous allons nous concentrer sur l’API Canvas uniquement.
L’élément HTML canvas
L’élément HTML canvas va servir de conteneur pour nos dessins et figures. Nous allons dessiner à l’intérieur de celui-ci.
Par défaut, l’élément canvas est représenté visuellement par une zone rectangulaire de 300px de large par 150px de haut dans la page HTML, est transparent et ne possède ni contenu, ni bordure.
Pour modifier la taille d’un élément canvas, on peut soit utiliser les attributs HTML width (pour la largeur) et height (pour la hauteur), soit les propriétés width et height de l’interface HTMLCanvasElement qui hérite de l’interface DOM HTMLElement qu’on connait bien.
Dessiner dans un canevas en JavaScript la théorie
Pour dessiner au sein d’un élément canvas en JavaScript, nous allons devoir suivre les étapes suivantes :
- Accéder à l’élément
canvasen JavaScript ; - Accéder au contexte de rendu du canevas ;
- Utiliser les propriétés et méthodes adaptées pour dessiner.
Pour dessiner dans un élément canvas en JavaScript, il va avant tout falloir accéder à cet élément. Pour cela, on peut utiliser document.querySelector() ou document.getElementById() par exemple.
Ensuite, il va falloir accéder au contexte de rendu du canevas ou « l’extraire ». L’élément canvas crée en effet une surface de dessin qui va exposer plusieurs contextes sur lesquels on va se baser pour dessiner.
Les deux contextes les plus connus et utilisés sont le contexte 2D et le contexte 3D. Encore une fois, nous allons ici nous concentrer sur le contexte 2D.
Pour accéder à ce contexte 2D, nous allons utiliser la méthode getContext() de l’interface HTMLCanvasElement.
On va passer le contexte auquel on va accéder (2d dans notre cas) en argument de cette méthode.
La méthode getContext() renvoie un objet appartenant à l’interface CanvasRenderingContext2D. Nous allons utiliser cet objet pour accéder aux méthodes de cette interface qui vont nous permettre de dessiner.
