Promena boje linije u canvas-u na JavaScript-u

Hajde sada da naučimo kako da promenimo boju konture i popune. Za to postoje sledeća svojstva: svojstvo strokeStyle postavlja boju konture, a svojstvo fillStyle - boju popune. Boje se postavljaju u uobičajenom CSS formatu.

Primer

Nacrtajmo konturu pomoću rect i obojimo je u crvenu boju:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 100);
ctx.strokeStyle = 'red';
ctx.stroke();

Результат:

Primer

Nacrtajmo kvadratić pomoću rect i popunimo ga zelenom bojom:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 100);
ctx.fillStyle = 'green';
ctx.fill();

Результат:

Napomena

Važno: kada postavite strokeStyle ili fillStyle, nova vrednost će se primeniti na sve oblike koji će biti nacrtani od tog momenta. Za svaki oblik za koji vam je potrebna drugačija boja, morate ponovo postaviti vrednost fillStyle ili strokeStyle.

Praktični zadaci