Below you'll find the four different HTML5 <canvas> elements that are part of the glow algorithm along with an explanation of each canvas' use. Notice how the glow color of each glowing shape bleeds over onto the non-glowing rectangles that are moving down the screen.

Of the four canvases below, only the frame buffer (far left) is typically visible. The other three are meant to be "off-screen" buffers on which computational work is done, so their CSS styles are normally style.display = "none";. I've shown them here so you can see how they function.

For an interactive demonstration of this glow algorithm, with darker glow colors that are easier to see on the glow output buffer, click here.

Frame buffer:

What the user sees. The glow pixels from the glow output buffer (third from left) are composited on to this canvas after the glow computation is complete.
Glow color:

This buffer is read to see what color the glow pixels should be. Only shapes that glow are written here.
Glow output:

Where the glow pixels are written after they're computed. This buffer's contents are written to the frame buffer using a compositing operation.
Glow parameter/occlusion:

Glow parameters and shapes that should occlude a glowing object are written here. Instead of colors, each "pixel" contains information about how the glow should be computed. For each 32-bit pixel, this buffer contains:

Byte 1 - Alpha value at which the first glow pixel away from the shape should start (0 - 255)

Byte 2 - The alpha of the underlying shape. This is relevant because as this shape is fading from opaque to transparent, the alpha of its glow should be reduced accordingly (0 - 255).

Byte 3 - Glow distance in pixels (0 - 255).

Byte 4 - This is always 1.0 so that the data written to this buffer isn't altered by compositing operations.