Canvas2D: Repeating/mirrored gradients

[litherum]

It's currently impossible to draw repeating/mirrored gradients (at least, in a single call) in Canvas2D.

• CSS supports repeating gradients
• SVG supports repeating/mirrored gradients
• The COLR (version 1) table in OpenType supports repeating/mirrored gradients
• Someone on Stack Overflow is asking for repeating gradients

Repeating/mirrored gradients seem like a useful and natural addition to canvas 2d.

Polyfilling repeating gradients (by drawing individual gradients in a loop) isn't possible, because some radial repeating gradients actually fit infinite periods into finite space:

[annevk]

cc @whatwg/canvas

[junov]

This would be trivial to add. Browsers already have the mechanics to do this due to CSS and svg.

Question is how do we present this in the API. We could either: 1) follow the way createCanvasPattern does it with a "repeat" argument, or 2) we could add an 'options' dictionary with a repeat field in it.

This made me realize: CanvasPattern does not have mirroring modes. Is there even demand for that? I mean it's quite easy to implement mirroring on top of an API that supports repeat, but it requires double the number of color stops.

[fserb]

This sounds reasonable to me too.

I think we should have an options dict for create*Gradient, and if folks think consistency is an issue, maybe we could also add an optional dictionary to createCanvasPattern?

And yeah, I think we should have mirroring as an option there.

[litherum]

What are the next steps?

[domenic]

You could skip straight to a spec pull request if you think the idea is clear enough at this point. Or, you could try to write up the idea in more detail (e.g. proposed IDL and rough processing model) if you think there are interesting open questions people might want to discuss.