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