Adding support for High Dynamic Range (HDR) imagery to HTML Canvas: a baseline proposal

[palemieux]

The Color on the Web CG would very much appreciate your feedback on the following strawman, which motivates and proposes baseline modifications to the HTML Canvas API to enable support for High-Dynamic Range (HDR) imagery:

https://github.com/w3c/ColorWeb-CG/blob/8eac62f15e5b41940636beb031f6214b61e933af/hdr_html_canvas_element.md

The proposed modifications allow the HTML Canvas API to manipulate High Dynamic Range (HDR) images expressed using the widespread BT.2100 PQ and BT.2100 HLG color spaces, without precluding adding future HDR capabilities, such as support for additional color spaces like a linear high-dynamic range color space.

[Kaiido]

cc @whatwg/canvas

Not my domain of expertise at all, so pardon me if I'm out of context here, but the colorMetadata attribute is a bit unclear to me.
It says in the strawman that it is used to "define the tone mapping algorithm used when rendering the image to a display" (emphasize mine). Is it really to be used only when rendering to a display (like a monitor)? Authors don't really have access to that time. Also, what if they want to render two images on the same canvas, both requiring different tone mapping options?
Or is it actually meant to affect the next drawings on the context? (including compositing etc.)
If this is meant mainly for images drawn through drawImage(), maybe an alternative would be to set that option on createImageBitmap() instead?

[palemieux]

colorMetadata is intended to be used whenever the image is rendered, i.e. the pixels of the image transformed, and is not limited to rendering to a physical display. I will file an issue to clarify this.

Also, what if they want to render two images on the same canvas, both requiring different tone mapping options?

Is the following use case the one you have in mind?

• image A has a certain set of colorMetadata parameters
• image B has a different set of colorMetadata parameters
• image A and image B are drawn into a Canvas element

What should the colorMetadata parameters of the Canvas element be set to?

[Kaiido]

I'll continue the first branch of the discussion over at the linked issue.

Is the following use case the one you have in mind?

image A has a certain set of colorMetadata parameters
image B has a different set of colorMetadata parameters
image A and image B are drawn into a Canvas element

What should the colorMetadata parameters of the Canvas element be set to?

Yes, that's the use case I had in mind. And I'm not sure how using that API it can be handled, nor if it's actually possible to handle it.

[palemieux]

One approach is to set the colorVolumeMetadata of the destination Canvas element to the union of the two color volumes (or a superset thereof). In media & entertainment, Rec. 2020 primaries + D65 white point is effectively a superset of common distribution color spaces. minimumLuminance and maximumLuminance can then be set as the union of the range covered by each of the two images.

Another approach is to simply not specify any colorVolumeMetadata, which should work fine for individual images.

Finally, the next step for the CG is to define an API that allows the web app to perform its own tone-mapping. for more complex uses or when the app needs finer control.

[palemieux]

Please find below an updated proposal for adding support for High Dynamic Range (HDR) imagery to HTML Canvas.

https://github.com/w3c/ColorWeb-CG/blob/hdr_canvas_r2/hdr_html_canvas_element.md

Selected highlights of this revision to the proposal;

• adds a linear display-referred color space (rec2100-display-linear)
• adds display color volume information to Screen interface of the CSS Object Model
• improves color space conversion examples

Feedback, issues and questions are welcome at mailto:public-colorweb@w3.org and https://github.com/w3c/ColorWeb-CG/issues.

Contacts: @palemieux and @svgeesus (Color on the Web CG co-chairs)