How can I dynamically generate an image with an alpha gradient?

Question

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).

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.

Answer 1

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/

Answer 2

ImageMagick is the easiest way to complite your task. Full list of functions is: https://www.php.net/manual/en/book.imagick.php

For creating alpha channel: https://www.php.net/manual/en/function.imagick-getimagealphachannel.php