The CanvasRenderingContext2D.strokeStyle property of the Canvas 2D API specifies the color, gradient, or pattern to use for the strokes (outlines) around shapes. The default is #000 (black).
In this example, we use two for loops and the arc() method to draw a grid of circles, each having a different stroke color. To achieve this, we use the two variables i and j to generate a unique RGB color for each circle, and only modify the green and blue values. (The red channel has a fixed value.)
js
const ctx = document.getElementById("canvas").getContext("2d");for(let i =0; i <6; i++){for(let j =0; j <6; j++){
ctx.strokeStyle =`rgb(
0,
${Math.floor(255-42.5* i)},
${Math.floor(255-42.5* j)})`;
ctx.beginPath();
ctx.arc(12.5+ j *25,12.5+ i *25,10,0, Math.PI*2,true);
ctx.stroke();}}
In WebKit- and Blink-based browsers, the non-standard and deprecated method ctx.setStrokeColor() is implemented in addition to this property.
js
setStrokeColor(color);setStrokeColor(color, alpha);setStrokeColor(grayLevel);setStrokeColor(grayLevel, alpha);setStrokeColor(r, g, b, a);setStrokeColor(c, m, y, k, a);