Propriété : CanvasRenderingContext2D.strokeStyle

Contient le style de trait, avec une couleur unie ou un gradient de couleurs

Syntaxe
String myContext.strokeStyle

Compatible tous navigateurs

Oui

Description
Contient le style de trait, avec une couleur unie sous forme de code couleur, un gradient de couleurs sous la forme d'un objet CanvasGradient ou un motif créé avec createPattern().

Pour une couleur unie, il est possible de la définir avec son code couleur #FA25AA ou en passant par la chaîne rgb(200,15,90).

Le style de remplissage est enregistré dans la propriété fillStyle.

Exemple 1 : Lignes de couleurs

Code source

<canvas id="myCanvas" width="300" height="150"></canvas>
<script type="text/javascript">
var myCanvas=document.getElementById("myCanvas");
var myContext=myCanvas.getContext("2d");

// Les lignes
for (var i=1; i<=14; i++) {
myContext.strokeStyle="rgb("+(i*8)+", "+(i*2)+", "+(i*15)+")";
myContext.lineWidth=i;
myContext.beginPath();
myContext.moveTo(3+i*15,0);
myContext.lineTo(3+i*15,150);
myContext.stroke();
}

// Le contour
myContext.strokeStyle="rgb("+(i*8)+", "+(i*2)+", "+(i*15)+")";
myContext.lineWidth=2;
myContext.strokeStyle="#EE1540";
myContext.beginPath();
myContext.rect(1,1,298,148);
myContext.stroke();
</script>

Résultat

Emulation de la console

Explication

Crée des lignes verticales de couleurs progressives.

Page en rapport
Le tutoriel sur le dessin avec canvas

Page mise à jour le 05/07/2018