HDR Canvas Example

This is an experimental feature. Use Chrome 108 or higher (Canary as of time of writing).

In chrome://flags, set the following:

• Experimental Web Platform features: Enabled
• Out-of-process 2D canvas rasterization: Enabled

Image examples

Below are two images representing the same scene. The image on the left is HLG, and the image on the right is PQ.

2D Canvas examples (HLG and PQ, automatically tone mapped)

The canvas on the left is in color space rec2100-hlg, and the above HLG image from the left is drawn to it.

The canvas on the right is in color space rec2100-pq, and the above PQ image from the right is drawn to it.

The following slider may be used to adjust the SMPTE ST 2408 maximum luminance value (might not have an effect on all platforms yet):

WebGL examples (HLG and PQ, automatically tone mapped)

The canvas on the left is in color space rec2100-hlg, and the above HLG image from the left is drawn to it.

The canvas on the right is in color space rec2100-pq, and the above PQ image from the right is drawn to it.

(The PQ canvas is not affected by the above metadata slider, because that code is not written yet).

Manual tone map example

This canvas has a float16 backing, and its color space is extended-sRGB.

This canvas is populated by ImageData with increasing linear light values.

Press the button below to draw a red line at the screen's maximum brightness.