Commencer avec canvas en JavaScript

Le canvas est une zone de dessin spéciale dans le navigateur en JavaScript. Cette zone est créée à l'aide de la balise <canvas>, à laquelle il faut spécifier une largeur et une hauteur :

html<canvas width="200" height="200"></canvas>

Pour travailler avec cette zone en JavaScript, commençons par obtenir une référence à cette balise dans une variable :

javascriptlet canvas = document.querySelector('canvas');

Ensuite, il faut appliquer à cette variable la méthode getContext :

javascriptlet canvas = document.querySelector('canvas');
let ctx    = canvas.getContext('2d');

On peut simplifier :

javascriptlet ctx = document.querySelector('canvas').getContext('2d');

En conséquence, la variable ctx contiendra un objet renfermant ce qu'on appelle le contexte d'exécution. Tout le dessin se fera à l'aide des méthodes de cet objet. Nous étudierons cela dans les prochaines leçons.