Contexte de dessin sur le canvas

La méthode getContext()

Avant de commencer l'intégration des dessins sur le canvas, il faut d'abord spécifier le contexte de dessin (ou contexte de rendu) via la méthode getContext(). Cette méthode s'applique sur l'élément canvas et accepte comme argument une chaine de caractère qui spécifie le contexte, comme 2d qui permet de dessiner sur une surface plane, et webgl (et sa version améliorée webgl2) qui permettent des rendus 3D.

Dans le reste du cours nous allons allons voir le contexte de rendu 2D et nous allons considérer le code HTML de l'intégration du canvas vu dans la page précédente:
Pour spécifier le contexte de rendu nous allons saisir le code Javascript suivant:
La première ligne permet de récupérer l'élément canvas via le DOM et la deuxième linge spécifie le contexte de rendu 2D.

Spécifier les couleurs de dessin

Attributs fillStyle et strokeStyle

En général, les objets de base que l'on peut dessiner contiennent un contour et un fond. Si l'objet est creux alors il dispose seulement d'un contour. Si aucune couleur n'est spécifiée alors les éléments à dessiner seront affichés en noir.

Afin d'appliquer des couleurs différentes à nos objets, on fait appel aux attributs fillStyle et strokeStyle:

• fillStyle: permet de spécifier la couleur de fond (ou de remplissage) de l'objet.
• strokeStyle: permet de spécifier la couleur du conteur de l'objet.

Les couleurs sont spécifiées à la manière de CSS c'est à dire:

• Nom de couleur: qui représente le nom de la couleur souhaité en anglais (comme red, blue, orange...)
• Code hexadécimal: qui spécifie le code hexadécimal de la couleur dans l'espace Rouge, Vert et Bleu, comme #FF0000
• Code décimal: qui définit la couleur en décimal par la fonction rgb(), comme rgb(255 , 0 , 0)
• Code décimal avec transparence: qui définit la couleur via la fonction rgba(), comme rgba(255 , 0 , 0 , 0.5)

Si les attributs fillStyle et strokeStyle sont définis, alors leurs couleurs seront appliquées dans le reste du code. Pour changer de couleur alors il faut les redéfinir avec la couleur souhaitée et qui va à son tour s'étendre sur tous les objets qui seront créés après.

Exemple: