Home/ Questions/Q 3989964
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T06:26:14+00:00

I’m looking for a way to dynamically create an ellipse with a feathered edge

  • 0

I’m looking for a way to dynamically create an ellipse with a feathered edge (and be able to control the degree of the feathering). Ideally, this would be achieved through Javascript, as the intended use is in an app which may be made to be available offline, but for simplicity, I’d be happy with a PHP solution in the meantime.

I did attempt a solution using GD, however I found it quite limited when dealing with alpha. The main issues were that using a filled ellipse and layering would cancel out the transparency effect, and that just drawing the border with progressively smaller ellipses caused problems where the ellipses did not perfectly line up (see image below).

Example

Is there a solution I can use that eliminates these issues, without getting too complex? I’m aware I could create an image pixel by pixel, but that seems like a very complex method for what should be a relatively easy task.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s an example using the tag that looks like it might start you on the right path:

    http://nixtu.blogspot.com/2010/07/html5-canvas-gradients-radial-gradient.html

    And here’s a fiddle that shows what I THINK you might be looking for:

    http://jsfiddle.net/hgZt7/2/

    • 0