Dessin d'un rectangle dans le canevas
Tout trait possède une épaisseur définie par la méthode lineWidth et une couleur définie par la méthode strokeStyle.
Un rectangle se définit par la position de son coin supérieur gauche (X,Y) , sa largeur L et sa hauteur H : strokeRect(X, Y, L, H).
Afin de définir dans quel contexte se font les dessins, il est nécessaire lors de l'appel d'une méthode, de préciser le nom du contexte. Par exemple, ici le contexte est nommé graphe, on écrit graphe.lineWidth pour définir l'épaisseur du trait.
Le dessin se fait dans le script. C'est ce qui va permettre de créer de l'interactivité. Le langage utilisé dans le script s'appelle javascript.
Tracer un rectangle
Syntaxe :
Attention, les instructions dans le script finissent par un ;