CanvasRenderingContext2D API Improvements

[mysteryDate]

• Specification Title: New Canvas2D API
• Specification or proposal URL: https://github.com/fserb/canvas2d. Or an explainer video, if you feel so inclined.
• Mozillians who can provide input (optional): annevk

Other information

This proposal contains nine changes to the Canvas2D API. These changes are live in chromium behind the flag new-canvas-2d-api. We are looking to start origin trials as we have some collaborators who'd like to use the features.

• WHATWG issues are filed, there are discussions underway on all those issues there.
  • Context loss: API for dealing with 2D context loss whatwg/html#4809
  • Conic gradient: Proposal: add createConicGradient to CanvasRenderingContext2D whatwg/html#5431
  • willReadFrequently: willReadFrequently for Canvas2D whatwg/html#5614
  • CSSColor style input: Array color input for Canvas2D whatwg/html#5616
  • reset(): reset function for Canvas2D whatwg/html#5618
  • CSS text modifiers: CSS Text Modifiers for Canvas2D whatwg/html#5617
  • roundRect(): RoundRect for Canvas2D whatwg/html#5619
  • 4x4 transforms: Perspective transforms for Canvas2D whatwg/html#5620
  • Improved SVG filter interface: Canvas2D Filters whatwg/html#5621
• All 9 features have been implemented in chromium and have tests on wpt. I can provide specific links to implementations/tests if desired.
• Chrome Status

[annevk]

Apple feedback: https://lists.webkit.org/pipermail/webkit-dev/2021-May/031840.html & https://lists.webkit.org/pipermail/webkit-dev/2021-May/031850.html.

cc @jdashg

[kdashg]

We generally are in favor of these for Firefox, but with the following reservations:

roundRect:
I'm not sure this quality-of-life improvement is much better than relying on a polyfill. More ways to do the same thing mean more ways for bugs to creep in. Instead, prefer to use the existing (well-tested) primitives unless we have something more compelling here. (e.g. rect() is more compelling than just lines and moves, because it's an optimization opportunity by communicating relations between the lines and moves. I'm not sure that roundRect has the same level of benefit)

4x4 transforms:
There are a bunch of implementation concerns here (and mentioned on that issue) with regards to availability on various native 2d backends. This might not be a problem for us (we are using skia, some webrender, and (for now) d2d), but it's concerning enough to push me towards splitting this one off from the others. Needs more investigation.

SVG filter interface:
We would really rather people use WebGL if you want fast/efficient filters. (I made a number of comments on that issue) As is, we're generally against this one for the time being. There may be certain filters that could be useful, but let's talk about each filter on its own, rather than signing up for a whole class of new functionality here.

[zcorpan]

@kdashg per your comment, it sounds like "positive" but with concerns with complexity?

[kdashg]

I believe we are variously:

• Context loss: Positive
• Conic gradient: Positive
• willReadFrequently: Positive
• CSSColor style input: Positive
• reset(): Positive
• CSS text modifiers: Positive
• roundRect(): Neutral
• 4x4 transforms: Negative
• Improved SVG filter interface: Negative