La première chose que nous devons faire est de définir un objet connu sous le nom de "contexte graphique". Cet objet est lié au canevas html sur lequel nous désirons dessiner. Supposons que le canevas html est identifié par l'id "canvas" (je sais ... pas très original...) Le code javascript requis pour obtenir le contexte graphique (habituellement dénoté par la variable ctx) serait:

Ceci est pour un dessin en 2 dimensions ("2d") tel que mentionné dans l'introduction.

Puisque la librairie jQuery est si populaire, vous verrez souvent le "raccourci" suivant

Veuillez noter ...

Le code ci-dessus fonctionne bien pour les pages web "normales". Dans ce tutoriel, j'utilise un "iframe" pour créer une page web "fictive" apparaissant dans sa propre "fenêtre". Pour cette raison, le code que je dois utiliser est légèrement plus compliqué et ressemble plutôt à ce qui suit:

Vous n'aurez probablement jamais à utiliser quelque chose de semblable, mais, juste au cas où, j'ai pensé que ça vous serait utile de savoir, et surtout de comprendre d'où vient (normalement) la variable ctx, que j'utiliserai dans le reste de ce tutoriel.