Oval or ellipse radial gradient in canvas is not supported

[henryl53269518]

Recently I'm trying to convert my old projects from AS3 to HTML5 canvas in Animate.

One thing I noticed when published it to a browser is that the oval or ellipse radial gradient is not working. The warning in the Animate said the oval radial gradient is not supported but only the perfect circle radial gradient is. I did some searching but couldn't find any similar topic.

The thing is almost all of my previous drawing contained oval radial gradient. If this doesn't work in html5 canvas, it will really be a serious headache. Also this feature in my future project is also essential.

I'm wondering is there anything I'm missing or if there is another way to get around this problem? My current Animate version is 20.5.1

[kglad]

i'm not sure what you're calling an oval vs circular radial gradient. 

i'm guessing that you created a radial gradient (which is circular) and use the gradient transform tool to make it look oval.

in both as3 and canvas the gradient transform tool works and when converting an as3 project (that has an edited radial gradient) to canvas the edited gradient is converted.

[henryl53269518]

Yes, I'm talking about gradient transform tool. You can drag the arrow on the circle to an oval shape, so the entire gradient color in the fill will be an oval circle distribution.

Forget about as3, when you create a new html canvas project and create any radial gradient fill, and use the gradient transform tool to make the radial gradient oval, the publish result will not show it properly in the browser. And in the output window of Animate, it says something like "Only support circle radial gradient, oval radial gradient is not supported",(my Animate is not in English)

So I guess this function just doesn't work in a canvas project? Or am I the only one get this weird result? The only way I could think of to get around this is to make the circle radial gradient fill an object, then simply use transform tool to tweak it. But it's kinda tedious.

[kglad]

clayuuid is correct.  while the radial gradient tool and the gradient transform tool work the same in as3 and canvas, the published result is not the same.

[ClayUUID · Accepted solution]

The HTML5 Canvas graphics API doesn't support elliptical gradients, full stop.

You could probably work around this by putting the fill in a movieclip, setting it to cache as bitmap, then scaling it.

[henryl53269518]

Thank you, and yeah, the movie clip method is what I'm doing for now, kinda sad this  function is not supported though.