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. Move your mouse to move the shapes and see how each buffer's content changes. Notice how the glow is written over the rectangle that obscures the glowing shape.

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.

The colors here are darker so you can easily see the glow pixels on the glow write buffer. For a more dramatic and realistic use of glow, 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.