Inconsistent gradient output between SVG and Canvas renderer for bar

Take the following gradient-filled rectangle spec (v5.9.1):

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 200,
  "height": 200,
  "padding": 5,
  "marks": [
    {
      "type": "rect",
      "encode": {
        "enter": {
          "x": {"value": 0},
          "x2": {"value": 100},
          "y": {"value": 0},
          "y2": {"value": 400},
          "fill": {
            "value": {
              "gradient": "linear",
              "stops": [
                {"color": "red", "offset": 0},
                {"color": "white", "offset": 0.5},
                {"color": "blue", "offset": 1}
              ],
              "x1": 1,
              "x2": 0,
              "y1": 1,
              "y2": 0
            }
          }
        }
      }
    }
  ]
}

The SVG renderer looks like:

But the canvas renderer (and exporting to a PNG) looks like:

This is similar to the bug reported at https://github.com/vega/vega/issues/2052 – the only difference seems to be that this only affects non-equilateral marks.

[jheer]

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.

[marcprux]

I agree that non-axis-aligned gradients will generally be rare, so I think this can be put on ice.