Índice

Agregar color

Para agregar color, disponemos de las propiedades fillStyle="color" y strokeStyle="color".

La sintaxis para declarar los colores acepta todas las especificaciones de colores CSS y las de CSS3 (véase más adelante en el libro). De este modo, el color naranja puede definirse por:

- ctx.fillStyle = "orange"; 
- ctx.fillStyle = "#FFA500"; 
- ctx.fillStyle = "rgb(255,165,0)"; 
- ctx.fillStyle = "rgba(255,165,0,1)";

Ejemplo

<!DOCTYPE html> 
<html lang="es"> 
<head> 
   <title>Html5</title> 
   <meta charset="UTF-8"> 
</head> 
<body> 
<canvas id="dibujo" width="200px" height="200px" style="border: 1px 
solid black"> 
Su navegador no soporta la etiqueta canvas. 
</canvas> 
<script type="text/javascript"> 
var canvas = document.getElementById("dibujo"); 
var contexto = canvas.getContext("2d"); 
contexto.fillStyle = "#99ccff"; 
contexto.fillRect(25,50,150,100); 
</script> 
</body> 
</html>
images/CAP22IMG05.png

Comentario

Si define la propiedad strokeStyle o fillStyle, el nuevo valor se convierte en el valor por defecto para todas las formas diseñadas a partir de ese instante. Para cada forma que queramos colorear de forma diferente, tendremos que volver a definir las propiedades fillStyle o strokeStyle.