WebGL { premultipliedAlpha: true }
WebGL { premultipliedAlpha: false }
2D Context
Transparent Red
Transparent Red (Premultiplied)
Translucent Red
Translucent Red (Premultiplied)
Opaque Red

This example places three canvas elements atop a document with a medium grey background. The canvases are filled with a variety of color and alpha values, using either the WebGL or 2D Context APIs.

In Chrome 17+, the 2D context and non-premultiplied WebGL canvases display the same colors. This is the correct behavior. The 2D Context drawing API uses non-premultiplied colors, even though the underlying byte buffer might store premultiplied values.

In Firefox 22 and Safari 6, the premultipliedAlpha flag seems to be ignored. The Canvas behaves as if the premultipliedAlpha flag is always true. This is not the correct behavior.

Most WebGL applications will render fully-opaque pixels, so this is not relevant to most WebGL developers. But if you plan to blend your WebGL canvas with other elements on the page, you must understand the ramifications of premultiplied alpha values.