706074 - creating radial gradient patterns for canvas fails

Status: UNCONFIRMED

(Core :: Graphics, defect)

Description

[Justin Thomas]

Attachment: radial_fail.html

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:8.0) Gecko/20100101 Firefox/8.0
Build ID: 20111104165243

Steps to reproduce:

Created a radial gradient pattern using createRadialGradient method on a canvas context.


Actual results:

Nothing, no gradient was rendered.


Expected results:

A radial gradient should have been rendered.

It seems to just render nothing when used with values that should work. I have been unable to find any kind of pattern but it does occurs with various combinations and changing a value from something like 98.994 -> 98.995 (for example) will work. It seems to be due to DirectX (or the cairo directx), if I disable it in the about:config, it works, this also seems to fail in IE but shows up more like a degenerate case.

I would expect, like Chrome, this should render a radial gradient.

Comment 1

[Boris Zbarsky [:bzbarsky]]

Worksforme on Mac, unsurprisingly, given the direct2d dependency. Nothing to do with CSS, thoough.

Comment 2

[Justin Thomas]

Here is an additional example of something I found on the net, it seems that in more cases that not it just doesn't render anything. I'm fairly sure this worked prior to 7.0 release, will confirm shortly.

http://www.html5canvastutorials.com/tutorials/html5-canvas-radial-gradients/

Comment 3

[Christopher Toledo]

I'm seeing the bug on Arch x86_64, Firefox 11 (and nightly 14.0a1):
http://i.imgur.com/ZSfEL.png

However, the html5canvastutorials link posted above seems to work

Comment 4

[Kevin Brosnan [Ex-Mozilla]]

Please attache the image to this bug. Imgur has HTTP error 502 for all images currently.

Comment 5

[Christopher Toledo]

Attachment: Screenshots demonstrating difference between FF11 and Chromium

Comment 6

[Kevin Brosnan [Ex-Mozilla]]

What site produced that?

Comment 7

[Christopher Toledo]

(In reply to Kevin Brosnan [:kbrosnan] from comment #6)
> What site produced that?

http://mindsforge.com:3001
It's using the kinetic JS library, there's a check in there that sets the fill to "white" if jquery detects mozilla

Comment 8

[Christopher Toledo]

OK, I fixed the issue, I swapped the ColorStop colors, and used different numbers, and it works now:
https://github.com/naked/hive-go/commit/4c13b94084911ab46a1395cf468f70de9f45dfeb

(history showing fix)

Comment 9

[firebladed]

im also getting this bug on 
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:12.0) Gecko/20100101 Firefox/12.0

e.g http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_canvas_createradialgradient

Comment 10

[firebladed]

Attachment: ffox 12 winXP vs ffox 12 Win7 example

winxp example left, win 7 example right

Comment 11

[firebladed]

but this

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
var grd=ctx.createRadialGradient(100,50,0,60,50,50); // changed 3rd parameter to 0
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(0,0,150,100);

works

Comment 12

[firebladed]

but then this

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
var grd=ctx.createRadialGradient(100,50,0,60,50,40); // changed 6th parameter to 40
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(0,0,150,100);

doesnt

there appears to be something with the 3rd and 6th parameters (the gradient radii r0,r1 of the start and end circles)

Comment 13

[firebladed]

when i say works i mean renders something, looking again, they don't render what they should

Comment 14

[well.bad]

Same problma here, Firefox 13 on Windows 7 32bits. If I disable Hardware Acceleration the problem is gone, or if I change the radius to 0 as mentioned above.

Someone need to fix that asap.