HTML5 how to draw transparent overlapping spheres?

Question

I have a complex HTML5 task.. I need to draw transparent overlapping spheres. Please have a look at:

https://i.stack.imgur.com/Nlw1Y.jpg

I need to draw a sphere which is easy, But, I need to fill it as it look in the picture above (link) and make sure its semi-transparent..

The spheres has to move, so, one time the smaller sphere in the back can be animated and be bigger..

I know its complicated (it looks easy but its hard to program).

Any help will be appreciated!

Thanks!

Answer 1

You can set the globalAlpha value to get the transparency effect:

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.globalAlpha = 0.5;

Something like this jsfiddle

Answer 2

If you want to draw transparent spheres use KineticJS:

http://jsfiddle.net/palani/mN2dC/