Proposed investigation: Wide Gamut 2D Graphics using HTML Canvas

[KaliedaRik]

Inspired by this Webkit blog article of the same name

2D canvas elements are capable of supporting two color spaces: srgb (the default), and display-p3. Setting a canvas element's color space happens at the time the we invoke the canvas element's .getContext('2d', {...}) function.

The article includes some code to feature detect whether a browser, and the current screen on which the browser window is being displayed, support the p3 color space.

Proposal:

• Implement a way for the user to indicate that they want a canvas to use the p3 color space (where it is supported). We can do this as an optional data attribute for canvas elements defined in the DOM, and an equivalent attribute on the SC addCanvas({...}) function. Default must be to create the canvas context with the srgb color space.
• We need to implement a way for SC to detect a change in the color space support, for instance when an end user drags a browser between screens that do/do not support the p3 color space.

[KaliedaRik]

Results of investigation

Initialise Canvas

• We can initialise the Canvas element/wrapper, and its associated Cells, to use the display-p3 color space.
• We can mark a canvas as requiring a display-p3 color space - where supported by device, browser and display screen - by including a new data attribute in the HTML element: data-canvas-color-space="display-p3"
• The SC Canvas and Cell wrapper constructors also support a new attribute canvasColorSpace, which can be set to the value display-p3 ... this is probably overkill; Cells in particular will inherit the color space of the Canvas wrapper on which they are instantiated.
• We will need to update SC's color object to recognise and action the new CSS color() arguments, though using such a string for an SC entity fill or stroke does work.
• A new Demo for this functionality - canvas-065 - has been added to the testing suite.

React to user interaction

• The proposed use case is: "When a user drags a browser between screens, the canvas elements present in the browser's web page should adapt their color spaces to match the supported color space if the canvas elements have been marked as supporting the display-p3 color space."
• Investigation confirms that to achieve this use case, any such canvas element in the web page needs to be replaced by a new clone of that canvas, after which we can get a context engine for that canvas which supports the changed color space. In addition, all Cells wrappers' canvas elements contributing to that Canvas need to be similarly recreated. This is (potentially) doable, but the changes required to the code are deep and far-reaching.
• A major blocker, however, is that the new canvas elements in the web page will lose all their event listeners, which the developer would need to recreate whenever the user drags the browser to a new display screen with a different color space.

Actions arising

• For Initialise Canvas, this work has been taken forward in PR Investigate Wide Gamut 2D Graphics (p3 color) #60
• Additional work will be undertaken to support the new CSS color() arguments in a future PR.
• For React to user interaction, this functionality will not be added to SC.

[KaliedaRik]

Work to investigate new CSS color() strings has been completed in PR #62