Chrome Canvas Linear Gradient != Firefox Canvas Linear Gradient

Question

Well , the problem is the next :

   canvas = GreenCanvas.get(0).getContext('2d');
   grad = canvas.createLinearGradient(0,0,255,0);
   grad.addColorStop(0, 'rgb('+r+','+0+','+b+')');
   grad.addColorStop(1, 'rgb('+r+','+255+','+b+')');
   canvas.fillStyle = grad;
   canvas.fillRect(0,0,256,34);

256 pixels . from for example rgb(0,0,0) to rgb(0,255,0)

Chrome 6.0.472: gradient (0,0,0) (0,1,0) (0,2,0) (0,3,0) (0,4,0) ... (0,255,0)

Firefox 3.6.6: gradient (0,0,0) (0,0,0) (0,1,0) (0,2,0) ... (0,255,0)

i would like to see who programs that gradient function in firefox . But anyway , i would like to know if its a real problem , or is that in firefox the gradient is done that manner. Or if it exist another manner to do a well done gradient without using too much memory.

Answer 1

It's known that Chrome has problems with the Canvas gradients at the moment.

I submitted a bug to Chromium because of how many of hixie's (the specification writer) tests were failing on Chrome.

In short, you can't make your 'grad' variable. You have to set it directly.

This works:

   var context = document.getElementsByTagName('canvas')[0].getContext('2d');
   context.fillStyle = context.createLinearGradient(0, 0, 500, 300);
   context.fillStyle.addColorStop(0, '#0000ff');
   context.fillStyle.addColorStop(1, '#ff00ff');
   context.fillRect(0, 0, 500, 300);

This does NOT work, even though they are SUPPOSED to do the same thing:

   var context = document.getElementsByTagName('canvas')[0].getContext('2d');
   var g = context.createLinearGradient(0, 0, 500, 300);
   g.addColorStop(0, '#0000ff');
   g.addColorStop(1, '#ff00ff');
   context.fillStyle = g;
   context.fillRect(0, 0, 500, 300);

For now, just do it the first way.

Here's the filed bug report from early September.

http://code.google.com/p/chromium/issues/detail?id=54070&can=4&colspec=ID%20Stars%20Pri%20Area%20Feature%20Type%20Status%20Summary%20Modified%20Owner%20Mstone%20OS