News for hackers. Stuff that matters.
Re:It's always been you, Canvas2D by rikroots on Friday March 04, 2022 @07:43AM (#30553892)
I'll add some of my thoughts about this article's take on latest Canvas2D developments.

1. ctx.roundRect() - is a nice addition to the 2D stable of shapes, fitting alongside other recent additions like ctx.ellipse(). I was a little disappointed that the example of how to achieve this using existing functionality relied on a set of .moveTo, .lineTo and .arcTo instructions; the article misses a trick by not mentioning that we can also use an SVG path.d string to define a Path2D object and use that to fill/stroke the shape. Note: I can't find mention of .roundRect() in the MDN documentation.

2. Canvas Conic gradients have been supported in both Firefox and Safari for a while now. Good to see it arriving in Chrome. To complete the set of gradients, it would also be nice to see support for ports of the CSS repeating-linear-gradient() and repeating-radial-gradient() into the Canvas API.

3. Text modifiers - text has always been an over-simplistic mess in the Canvas2D API. In theory a user should be able to use ctx.font to load a valid CSS font string (including all the supported font size lengths, etc) and have the text rendered as expected; sadly the implementations between various browsers are all over the place. In my dreams I hope that one day we will be able to set a width/justification and have the text string broken into lines while respecting those requirements. Browsers do it already for DOM/CSS layout and rendering - I wonder how difficult it would be to tap into that functionality rather than having to reinvent it for 2D canvases?

4. context.reset() - nice!

5. Filters - SVG filters are massively powerful, yet also difficult to master. We can already build some really complex filters in SVG and reference them in the Canvas2D context; I also like the way we can add CSS filter strings to the context (eg for a nice, easy-to-understand and performant blur effect). The article mentions a `ctx.filter = new CanvasFilter([])` construction, but I can't find CanvasFilter in the MDN documentation.

Re:It's always been you, Canvas2D by mysteryDate on Friday March 04, 2022 @09:10AM (#30554933)
CanvasFilter is coming to MDN documentation, it's been a struggle... I promise it's part of the spec: https://html.spec.whatwg.org/multipage/canvas.html#filters
Re:It's always been you, Canvas2D by jfk13 on Friday March 04, 2022 @08:48AM (#30554649)
> 1. ctx.roundRect() ... Note: I can't find mention of .roundRect() in the MDN documentation.

https://github.com/mozilla/standards-positions/issues/519#is... raised some questions about the addition of .roundRect(); I don't know if any firm decisions have been made.