Gabarit de script basique sur GitHub, à télécharger⤓
Le canvas, qui signifie toile en français, est un élément html qui permet de modifier une zone graphique via un script JavaScript. Comme expliqué sur mozilla.org, il peut par exemple être utilisé afin de dessiner des graphiques, manipuler des images ou jouer des animations. Comme tout les éléments Html, le canvas peut posséder des attributs. La balise canvas s’écrit ainsi en html :
Pour utiliser le canvas, il est obligatoire de passer par un script. La première chose à faire va être d’attribuer une taille au canvas. Sa taille par défaut est de 300pixels de large et 150 pixels de hauteur. Ses dimensions peuvent être modifiées en Css, mais l’image sera étirée. En lui appliquant des valeurs via un script, il est même possible de calculer la taille du canvas en fonction de la taille de l’écran (cf. Gabarit Canvas à télécharger). Ensuite, il faut spécifier le type de contexte de rendu du canvas. Ici, le contexte sera 2D, mais il est possible d’utiliser d’autres contexte comme WebGL, qui utilise un contexte 3D. La méthode : LeCanvas.getContext(‘2D’); Par défaut, le canvas est vide. Il faut imaginer une feuille blanche à laquelle on aurait donné une hauteur et une largeur. Il faut ensuite choisir les formes que l’on veut dessiner. Il faut toujours effectuer les paramétrages de couleurs ou qui agissent sur le canvas avant de tracer les formes, sinon ils ne s’appliqueront pas.