Alterando a cor da linha no canvas com JavaScript

Agora vamos aprender a alterar a cor do contorno e do preenchimento. Para isso, existem as seguintes propriedades: a propriedade strokeStyle define a cor do contorno, e a propriedade fillStyle - a cor do preenchimento. As cores são definidas no formato CSS usual.

Exemplo

Vamos desenhar um contorno usando rect e colori-lo de vermelho:

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

Результат:

Exemplo

Vamos desenhar um quadrado usando rect e preenchê-lo com a cor verde:

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

Результат:

Observação

Importante: quando você define strokeStyle ou fillStyle, o novo valor será aplicado a todas as formas que forem desenhadas a partir desse momento. Para cada forma para a qual você precisar de uma cor diferente, você deve redefinir o valor de fillStyle ou strokeStyle.

Exercícios Práticos