Le canvas HTML5 est un tag  <canvas id="canvas_id"></canvas> que vous placez ou vous souhaitez dans votre page web. Javascript peut dessiner dedans avec les ordres impératif (ce n'est pas un arbre de noeuds comme HTML). Si vous souhaitez "dessiner" en ajoutant des noeuds c'est un Noeud SVG qu'il faut créer. L'avantage du canvas HTML5 c'est de justement de ne dessiner que ce que vous jugerez nécessaire 

Avant de dessiner javascript devra obtenir un "contexte graphique" sur ce tag avec 

let canvas = document.getElementById('canvas_id');
let ctx = canvas.getContext('2d');
Javascript pourrait obtenir un contexte graphique 3D en demandant un contexte "webgl" ou "webgl2" mais il faut ensuite complètement gérer le pipeline graphique de openGL ES (envoyer les buffers de vertices, charger les shaders, etc.). Nous allons deja apprendre à dessiner avec le canvas classique 2D depuis son contexte graphique que nous appellerons souvent "ctx". ctx est un objet avec pleins de méthodes et qui gère de nombreux états (couleur de dessin, couleur de remplissage, font de caractères, etc.). 

Javascript peut ensuite dessiner dans le canvas grâce au contexte graphique

ctx.fillStyle = "rgb(200,0,0)"; // définit la couleur de remplissage du rectangle 
ctx.fillRect(10, 10, 55, 50);   // dessine le rectangle à la position 10, 10 d'une largeur de 55 et d'une hauteur de 50

(voir  https://developer.mozilla.org/fr/docs/Web/HTML/Canvas pour plus d'infos)

"rgb(200, 0,0)" vous rappelle quelque chose ? Normale ainsi qu'on définit une couleur en CSS. Eh comme pour les sélecteurs CSS utilisée en JQuery, les valeurs de styles sont largement re-utilisées comme états de dessin du contexte d'un canvas. 

ATTENTION : Il faut absolument que le tag existe AVANT que javascript dessine dedans. Il est donc préférable de placer le code de dessin dans une fonction et appeler cette fonction dans le onload du body et/ou dans les callbacks des événements qui nécessitent de redessiner.

ATTENTION2 : Les événements (ie onmousedown) recevront une callback d'évènement avec un objet (event) qui permettra de savoir où est la souris mais cette position de la souris sera peut-etre

Modifié le: jeudi 6 mars 2025, 10:23