How to draw a gradient line on a HTML5 canvas?

Question

Im looking for a function to draw a gradient line. It can be accomplished by drawing a gradient rectangle 1px wide, but somehow I always get the wrong colors. I think because the positions inside the rect are relative, and I need to draw the line using absolute positions.

So can someone show a quick example function?

With a little bit of code it would be much easier to help you... [Here](http://www.html5canvastutorials.com/tutorials/html5-canvas-linear-gradients/) is an example. — irie, May 31 '13 at 08:19

score 0 · Accepted Answer · answered May 31 '13 at 08:46

Here is a function, it should accomplis gradient line drawing

function drawgradientline(x,y,height){
     var grd = context.createLinearGradient(x, y, 1, height);

      grd.addColorStop(0, '#12a6eb');   

      grd.addColorStop(1, '#ebc711');
  context.fillStyle = grd;
  context.fill();
}

How to draw a gradient line on a HTML5 canvas?

1 Answers1