Промена боје линије у canvas у JavaScript-у

Хајде сада да научимо како да променимо боју контура и попуне. За то постоје следећа својства: својство strokeStyle поставља боју контура, а својство fillStyle - боју попуне. Боје се постављају у уобичајеном CSS формату.

Пример

Нацртајмо контур помоћу rect и обојмо га у црвену боју:

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();

Результат:

Пример

Нацртајмо квадрат помоћу rect и обојмо га у зелену боју:

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();

Результат:

Напомена

Важно: када поставите strokeStyle или fillStyle, нова вредност ће се применити на све облике који ће бити нацртани од тог тренутка. За сваки облик за који вам је потребна друга боја, морате поново поставити вредност fillStyle или strokeStyle.

Практични задаци