Cambiar el color de la línea en canvas con JavaScript

Ahora aprendamos a cambiar el color del contorno y del relleno. Para esto existen las siguientes propiedades: la propiedad strokeStyle establece el color del contorno, y la propiedad fillStyle - el color del relleno. Los colores se establecen en el formato CSS habitual.

Ejemplo

Dibujemos un contorno usando rect y pintémoslo de color rojo:

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

Результат:

Ejemplo

Dibujemos un cuadrado usando rect y pintémoslo de color 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();

Результат:

Aclaración

Importante: cuando estableces strokeStyle o fillStyle, el nuevo valor se aplicará a todas las figuras que se dibujen a partir de ese momento. Para cada figura para la cual necesites un color diferente, debes reescribir el valor de fillStyle o strokeStyle.

Problemas prácticos