canvas gradients: clipping bug for non axis aligned gradients

I'm simulating patterns or textures by using gradients (related: #1372)

I'm using an Area mark.

For SVG it works, but I think I should be using canvas.

When I switch to canvas, there is a clipping bug. The entire opaque orange area should have a gradient effect:

Almost certain this is related to the fix for #2365

After further thought I found a potential solution: for non-axis-aligned gradients, we can instead render the gradient into an offscreen canvas (for which we can apply whatever transforms we like) and use that to generate a CanvasPattern that serves as an item's fill / stroke. This is more costly (especially for large images or when using many gradient-filled objects) but perhaps that is OK given that this is a rare use case.

Originally posted by @jheer in https://github.com/vega/vega/issues/2365#issuecomment-593324733

Links to spec:

vega editor (massive wip spec): https://vega.github.io/editor/#/gist/4117104883af75d55dbb934ec613a47b/spec.json

or ohq (wip notebook): https://observablehq.com/d/c78aae6e014a6b6d

In the OHQ notebook you can play with a parameter for y2, and verify that the gradient works when it is 0 (so the gradient is axis aligned)

SVG also works in all cases when I flip renderer in notebook or editor.