Tracer une ligne droite avec Canvas

Tracer une ligne, choisir une couleur, une épaisseur, la fonction en détails avec plusieurs exemples.

On ne s'y attendrait pas, mais la fonction de tracé de ligne peut permettre des effets graphiques complexes, comme un exemple en est donné en bas de page. Cela grâce au fait que la fonction est décomposée en plusieurs instructions séparées pour définir le point de départ et d'origine, la couleur, l'épaisseur...

Pour faire la démonstration de cette fonction, on commence par déclarer une balise <canvas> comme expliqué dans le premier article de cette série, Démarrer avec canvas. 

<canvas id="moncanevas" width="400" height="150">
  Canvas requiert un navigateur moderne: Chrome, Firefox, Edge, Opera, Safari.
</canvas>

On définit une ligne avec deux instructions: moveTo et lineTo

Le tracé d'une ligne est décomposé en deux fonctions (comme en langage BASIC): moveTo(x,y) définit les coordonnées X et Y du point actuel, lequel sert de point de départ au tracé d'une ligne.
Et lineTo(x,y) fixe un point d'arrivée pour tracer un chemin droit entre le point actuel, et un nouveau point dont les coordonnées sont les paramètres X et Y.
La ligne n'est pas effectivement tracée avant que la fonction stroke() ne soit appelée.
Quand on veut tracer une nouvelle ligne qui n'est pas la continuation d'un tracé précédent, on commence avec la fonction beginPath().
Il faut donc au moins quatre instructions pour tracer une ligne. Exemple: 

canvas = document.getElementById("moncanevas"); 
if (canvas.getContext)
{    
    context = canvas.getContext('2d'); 
}
function drawLine()
{
 context.beginPath();
 context.moveTo(20,100);
 context.lineTo(200,10);
 context.stroke(); 
}
Canvas requiert un navigateur moderne: Chrome, Firefox, IE9, Safari.

Une couleur est donnée avec l'attribut strokeStyle

Choisir la couleur d'un tracé ne se fait avec un paramètre mais de façon globale, pour tous les tracés qui vont suivre. La valeur de l'attribut strokeStyle sera la couleur de tous les nouveaux tracés jusqu'à ce qu'il soit assigné de nouveau.
Mais cela ne s'applique pas au contenu des formes pleines comme par exemple un rectangle, leur couleur dépend d'un autre attribut, fillStyle.

Les valeur de couleur que l'on assigne à ces attributs sont les mêmes que pour le code CSS, par exemple: blue, #008, #000080, rgba(0,0,128,1) . 

context.strokeStyle='green'; 
context.fillStyle='rgba (0,0,128,1)';

La fonction drawLine précédemment définie est ainsi complétée d'un attribut de couleur:

function drawLine()
{
 context.beginPath();
 context.strokeStyle='green';
 context.moveTo(20,100);
 context.lineTo(200,10);
 context.stroke(); 
}

Important: Pour donner des couleurs différentes à des tracés de lignes, il faut rajouter la fonction beginPath() avant le tracé d'une nouvelle ligne. Des segments même séparés sont considérés comme faisant partie d'une même ligne jusqu'à la nouvelle occurence de la fonction beginPath.

Canvas requiert un navigateur moderne: Chrome, Firefox, IE9, Safari.

Quatre formats sont possibles pour définir une couleur...

Et les assigner à strokeStyle ou fillStyle (à coté aussi des textures, ce que l'on verra plus loin). Ces valeurs sont placées entre guillemets et peuvent être le nom d'une couleur, ou son code hexadecimal sous forme rouge/vert/bleu, ou son code décimal sur trois valeurs ou quatre avec un niveau d'opacité. 

ctx.fillStyle = "white";
ctx.fillStyle = "#FFFFFF";
ctx.fillStyle = "rgb(255,255,255)";
ctx.fillStyle = "rgba(128,128,128,0.5)";

Le quatrième attribut de rgba (a = alpha) définit l'opacité qui varie de 0.0 à 1, où 0 est la transparence totale et 1 l'opacité totale, ce qui est toujours le cas pour le format rgb simple. Donc une transparence moyenne se définit par 0.5.

L'attribut lineWidth définit l'épaisseur de la ligne

Déterminer l'épaisseur de la ligne se fait avec l'attribut lineWidth dont l'unité de valeur par défaut est le pixel. Donc l'unité n'a donc pas besoin d'être donnée si l'épaisseur est exprimée en pixels, seule une valeur entière est donnée. 

function drawLine()
{
 context.strokeStyle='green';
 context.lineWidth=4; 
 context.moveTo(20,100);
 context.lineTo(200,10);
 context.stroke(); 
}
Canvas requiert un navigateur moderne: Chrome, Firefox, IE9, Safari.

Les extrémités de la ligne peuvent être rondes ou carrées

Quand elle a plus de deux pixels d'épaisseur, on peut donner aux bouts de la ligne une forme ronde ou carrée. On ne peut pas lui donner la forme d'une flèche (pas plus qu'en SVG), ce qui aurait été utile pour les graphes.
Pour changer la forme on assigne l'attribut lineCap avec la valeur round (rond), square (carré) ou butt (pas de bout) qui est la valeur par défaut.
Dans le cas où la ligne n'a pas de bout, sa longueur n'est pas augmentée par celle des bouts, qui équivaut à la largeur de la ligne, telle que définie par lineWidth.

Exemple: context.lineCap='round';

Dans la démo on va essayer les trois valeurs successivement: butt en vert, square en bleu, puis round en rouge.

Canvas requiert un navigateur moderne: Chrome, Firefox, IE9, Safari.

On voit que les bouts de la ligne augmentent sa longueur en proportion de sa largeur.

Code source complet:

function drawLine4()
{
  var context = document.getElementById("canvas4").getContext('2d');
  context.lineWidth='8';
  context.strokeStyle='green';
  context.beginPath();
  context.moveTo(20,20);
  context.lineTo(200,20);
  context.stroke();
  context.beginPath();
  context.strokeStyle='#800';
  context.lineCap='square';
  context.moveTo(20,50);
  context.lineTo(200,50);
  context.stroke();
  context.strokeStyle='rgb(128,0,0)';
  context.lineCap='round';
  context.beginPath();
  context.moveTo(20,80);
  context.lineTo(200,80);
  context.stroke();
}

drawLine4();
La prochaine étape consiste à tracer une courbe.

Exemple d'application