Highlighted

Oval or ellipse radial gradient in canvas is not supported

Explorer ,
Sep 28, 2020

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

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.

TOPICS
How to, Missing feature

Views

81

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Oval or ellipse radial gradient in canvas is not supported

Explorer ,
Sep 28, 2020

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

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.

TOPICS
How to, Missing feature

Views

82

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 28, 2020 0
Adobe Community Professional ,
Sep 28, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 28, 2020 1
Explorer ,
Sep 28, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 28, 2020 0
Adobe Community Professional ,
Sep 29, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 29, 2020 1
Adobe Community Professional ,
Sep 28, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 28, 2020 1
Explorer ,
Sep 29, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 29, 2020 0