Skip to main content
henryl53269518
henryl53269518
Known Participant
September 28, 2020
Answered

Oval or ellipse radial gradient in canvas is not supported

  • September 28, 2020
  • 2 replies
  • 1621 views

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

This topic has been closed for replies.
Correct answer ClayUUID

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.

2 replies

C
ClayUUIDCorrect answer
Legend
September 28, 2020

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
    henryl53269518Author
    Known Participant
    September 29, 2020

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

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    September 28, 2020

    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
      henryl53269518Author
      Known Participant
      September 28, 2020

      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
      Community Expert
      kgladCommunity Expert
      Community Expert
      September 29, 2020

      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.

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices