Question

I need to render a simple chart and I want the points to be glassy looking circles/orbs in the chart area. I can find tons of examples of drawing these with Photoshop, but I don’t want to use stock images; I’d prefer to draw them in my HTML5 canvas. I am no artist, though!

There are many HTML5 canvas questions, but I don’t see anything that leads me to this solution.

A point in the right direction would be most appreciated.

Answer 1

All you have to do is create one or more radial gradients to fit the properties of the glassy object that you want. It’s easy to do!

Just one gradient:

// Create some gradient
var gradient = ctx.createRadialGradient(105, 105, 20, 120, 120, 50);
gradient.addColorStop(0, 'rgba(250,250,255,0)');
gradient.addColorStop(0.75, 'rgba(230,250,255,1.0)');
gradient.addColorStop(1, 'rgba(0,0,255,0)');

// draw the gradient (note that we dont bother drawing a circle, this is more efficient and less work!)
// but make sure it covers the entire gradient
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 300, 300);​

Can make this:

Live example:

http://jsfiddle.net/GTbjk/

Maybe you want to reign in that fuzzy edge:

gradient.addColorStop(0.8, 'rgba(0,0,255,0)');
gradient.addColorStop(1, 'rgba(0,0,255,0)');

http://jsfiddle.net/GTbjk/1/

I’m not going to make one to your specification, since you didn’t provide one and thats not what we’re here for anyway. Making these will almost exclusively be the work of well-placed radial gradients, so go experiment!

As j08691 points out this is a really inefficent way of making these unless you want them to be dynamic or scalable, you are better off just making images and use ctx.drawImage