New Canvas 2D API

[yisibl]

https://groups.google.com/a/chromium.org/g/blink-dev/c/bEgFQrTsDso

• RoundRect skia-python

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

ctx.fillRoundRect(10, 10, 50, 50, [10]); // Chrome 中当前实现是 ctx.roundRect()
ctx.fillRoundRect(100, 10, 50, 50, [10, 10, 0, 10]);

• createConicGradient() feat: support conic gradient #300
• Filter
• more...

[yisibl]

WebKit 表示基本支持该提案：

• https://lists.webkit.org/pipermail/webkit-dev/2021-May/031840.html
• https://lists.webkit.org/pipermail/webkit-dev/2021-May/031850.html

[yisibl]

CanvasRenderingContext2D.createConicGradient 已经在 Firefox 86 中初步实现，需要开启 canvas.createConicGradient.enabled flag

• Demo: https://codepen.io/yisi/pen/xxqVrpg

浏览器实施进度

• Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=1097034
• Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1627014
• Safari: https://bugs.webkit.org/show_bug.cgi?id=225539

HTML 规范：whatwg/html#6661

[controversial]

Are there any plans to support roundRect, support for which landed in Chrome in February?

[Brooooooklyn]

@controversial see here #601

[yisibl]

https://mail.google.com/mail/u/0/#inbox/FMfcgzGtwgjqpRQNjGdpCrQTWXMKWjfq

• alphabeticBaseline
• hangingBaseline
• ideographicBaseline