Arbitrary gradient transforms

[Herschel]

It'd be nice if CanvasGradient could have an arbitrary transform. For example, this would allow for elliptical radial gradients or skewed gradients.

This is possible with the current canvas API in some situations by 1) tracing the path with lineTo etc., 2) calling context.transform(..), and 3) calling context.fill(), which transforms the gradient while not transforming the path. But this feels both roundabout and doesn't play nicely if you want to use Path2D.

Ideally there would be a CanvasGradient.transform method that accepts a DomMatrix similar to CanvasRenderingContext2d.transform. This would be analogous to SVG gradientTransform.

Another possibility would be to allow context.createPattern to accept a CanvasGradient, as CanvasPattern.setTransform already exists.

[Kaiido]

Yes that would be nice.
Note that for Path2D you can still somehow hack around the situation by creating a new Path2D transformed by the inverse matrix you want to apply: https://jsfiddle.net/1t65ukea/

But I agree the API ought to offer a simpler way to do this.

[Herschel]

The transform & inverse trick unfortunately doesn't help with applying a gradient style to strokes, because transforming the context transforms the stroke geometry itself, resulting in odd-looking width, joins, etc.: https://jsfiddle.net/mwelsh/7zLac8m3/9/

[mikerreed]

Strong vote for transforms attached to all "shaders" in canvas2d: + gradients + patterns (image-shaders)

…

On Tue, May 17, 2022 at 1:08 AM Mike Welsh ***@***.***> wrote: The transform & inverse trick unfortunately doesn't help with applying a gradient style to strokes, because transforming the context transforms the stroke geometry itself, resulting in odd-looking width, joins, etc.: https://jsfiddle.net/mwelsh/7zLac8m3/9/ — Reply to this email directly, view it on GitHub <#28 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABC77QYS7EEFXT35MGQCDOTVKMSTZANCNFSM5WAGRDBQ> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

-- "I think I can safely say that nobody understands quantum mechanics." -- Richard Feynman "It ain't what you don't know that gets you into trouble. It's what you know for sure that just ain't so." -- Mark Twain "I am pleased to see that we have differences" -- Surak