Continuous gradient along a HTML5 canvas path

Question

I am trying to draw a continous gradient along a path of points, where each point has a it\'s own color, using the HTML5 canvas API.

See http://bl.ocks.org/rveciana/

Answer 1

Here's a slight modification of your original idea that makes the joins blend nicely.

Original: Draw a gradient line from the start to end of a line segment.

This causes the line joins to overlap and produces a noticeable & undesired transition.

Modification: Draw a gradient line that doesn't extend to the start / endpoints.

With this modification, the line joins will always be solid colors rather than be partially gradiented. As a result, the line joins will transition nicely between line segments.

Here's example code and a Demo:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var lines = [
  {x:100, y:050,color:'red'},
  {x:150, y:100,color:'green'},
  {x:200, y:050,color:'gold'},
  {x:275, y:150,color:'blue'}
];
var linewidth=20;

ctx.lineCap='round';
ctx.lineJoint='round';

for(var i=1;i

#canvas{border:1px solid red; margin:0 auto; }