¿Cómo puedo trazar una línea de degradado en el lienzo HTML?

Question

Estoy tratando de dibujar una línea que es un degradado. ¿Cómo es eso posible en el lienzo?

Answer 1

Sí. Ejemplo:

// linear gradient from start to end of line 
var grad= ctx.createLinearGradient(50, 50, 150, 150); 
grad.addColorStop(0, "red"); 
grad.addColorStop(1, "green"); 

ctx.strokeStyle = grad; 

ctx.beginPath(); 
ctx.moveTo(50,50); 
ctx.lineTo(150,150); 

ctx.stroke(); 

verlo en acción aquí:

http://jsfiddle.net/9bMPD/