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:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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.
