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>
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)
Líneas discontinuas
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>
Gradientes y patrones
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>