Colores de las lineas

Las lineas (trazos o path) por defecto se dibujan en negro, pero el color también se puede cambiar mediante una propiedad strokeStyle, con ella podemos definir el color que se usará para dibujar.

Más que explicar como es cada una lo mejor es verlas en funcionamiento.

<canvas id="mipapel" width="400" height="500"></canvas>
<script>
	miLienzo = document.getElementById("mipapel"); 
	lapiz = miLienzo.getContext("2d");
	lapiz.lineWidth = 20;
	lapiz.strokeStyle = "red";
	lapiz.strokeRect(10,10, 200, 200);
</script>

Prueba este código

El color puedes ponerlo por su nombre en inglés (red, blue, white...), por su definición hexadecimal (#FFAA00) por el método rgba(r, g, b, opac) o rgb(r,g,b). En estos dos últimos r, g, b son valores de 0 a 255 que indican el contenido de rojo, verde, azul, mientras que opac es el valor de opacidad (0 a 1)

Cualquier trazado puede dibujarse en colores, codificados en la misma forma que lo hace cSS

Líneas discontinuas

A veces se necesita destacar una linea como auxiliar por ejemplo o por dar efectos. Esto se puede hacer con líneas discontínuas. Se usa el método setLineDash(). Como argumento usa una lista (array) de valores que indica la longitud de los segmentos y el espaciado. Pueden ser dos o más valores. Si la lista está vacía se dibujan lineas contínuas. Se puede especificar un offset o desplazamiento para el inicio del primer trazo: lineDashOffset.

Existe un método para determinar el valor usado es getLineDash()q ue lógicamente devuelve una lista de números (un array). .

<canvas id="mipapel" width="400" height="500"></canvas>
<script> 

miLienzo = document.getElementById("mipapel"); 
   lapiz = miLienzo.getContext("2d");
   lapiz.beginPath();
   lapiz.setLineDash([5,5]);
   lapiz.moveTo(10,10);
   lapiz.lineTo(200,10);
   lapiz.stroke();
   lapiz.beginPath();
   lapiz.setLineDash([8, 5, 2, 2]);
   lapiz.moveTo(10, 40);
   lapiz.lineTo(200 , 40);
   lapiz.stroke();
</script>

Prueba este código

Gradientes y patrones

Al trazar una linea bien sea una recta o parte de una forma, se puede hacer en linea contínua o discontínua, con colores diferentes pero también se puede usar un gradiente o un patrón de imágenes para hacerlo.

Probemos un gradiente de color para dibujar un rectángulo con una linea gruesa para que se vea el efecto. Usaremos un gradiente lineal.

<canvas width="600" height="300" id="mipanel"></canvas>
<script> 
  var miLienzo = document.getElementById("mipanel");
  var lapiz = miLienzo.getContext("2d");  lapiz.beginPath();	  
  lapiz.arc(300,150,80, 0, 2*Math.PI);
  var grad=lapiz.createLinearGradient(0,0,200,0);
  grad.addColorStop(0, "red");
  grad.addColorStop(0.5, "blue");
	grad.addColorStop(1, "gray");
	lapiz.lineWidth = 20;
  lapiz.strokeStyle=grad;
  lapiz.strokeRect(10, 10, 200, 200);
</script>

Prueba este código