Canvas renderer does not size symbols correctly

I noticed a peculiar bug while trying to solve this problem. The graph that the editor renders is different from what is getting exported. The rendered graph is correct and the exported graph is wrong.

Vega Spec

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A simple bar chart with embedded data.",
  "background": "white",
  "padding": 5,
  "height": 400,
  "style": "cell",
  "data": [
    {
      "name": "source_0",
      "values": [
        {"a": "A", "b": 1.5, "c": 0},
        {"a": "B", "b": 0.5, "c": 0},
        {"a": "C", "b": 10, "c": 0},
        {"a": "D", "b": 1, "c": 0}
      ]
    },
    {
      "name": "data_0",
      "source": "source_0",
      "transform": [
        {
          "type": "filter",
          "expr": "isValid(datum[\"b\"]) && isFinite(+datum[\"b\"])"
        }
      ]
    }
  ],
  "signals": [
    {"name": "x_step", "value": 20},
    {
      "name": "width",
      "update": "bandspace(domain('x').length, 1, 0.5) * x_step"
    }
  ],
  "marks": [
    {
      "name": "marks",
      "type": "symbol",
      "style": ["path"],
      "from": {"data": "data_0"},
      "encode": {
        "update": {
          "opacity": {"value": 0.7},
          "fill": {"value": "red"},
          "stroke": {"value": "black"},
          "strokeOpacity": {"value": 1},
          "strokeWidth": {"value": 1},
          "shape": {"value": "M -1 0 L0 -10 L1 0"},
          "ariaRoleDescription": {"value": "point"},
          "description": {
            "signal": "\"a\" + \": \" + (isValid(datum[\"a\"]) ? datum[\"a\"] : \"\"+datum[\"a\"]) + \"; \" + \"b\" + \": \" + (format(datum[\"b\"], \"\"))"
          },
          "x": {"scale": "x", "field": "a"},
          "y": {"scale": "y", "field": "c"},
          "scaleY": {"field": "b", "type": "quantitative"}
        },
        "fill": {"signal": "gradient('red', [0,0], [1,0])"}
      }
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "point",
      "domain": {"data": "data_0", "field": "a", "sort": true},
      "range": {"step": {"signal": "x_step"}},
      "padding": 0.5
    },
    {
      "name": "y",
      "type": "linear",
      "domain": {"data": "data_0", "field": "b"},
      "range": [{"signal": "height"}, 0],
      "nice": true,
      "zero": true
    },
    {
      "name": "size",
      "type": "linear",
      "domain": {"data": "data_0", "field": "b"},
      "range": [0, 361],
      "zero": true
    }
  ],
  "axes": [
    {
      "scale": "y",
      "orient": "left",
      "gridScale": "x",
      "grid": true,
      "tickCount": {"signal": "ceil(height/40)"},
      "domain": false,
      "labels": false,
      "aria": false,
      "maxExtent": 0,
      "minExtent": 0,
      "ticks": false,
      "zindex": 0
    },
    {
      "scale": "x",
      "orient": "bottom",
      "grid": false,
      "title": "a",
      "labelAlign": "right",
      "labelAngle": 270,
      "labelBaseline": "middle",
      "labelOverlap": true,
      "zindex": 0
    },
    {
      "scale": "y",
      "orient": "left",
      "grid": false,
      "title": "b",
      "labelOverlap": true,
      "tickCount": {"signal": "ceil(height/40)"},
      "zindex": 0
    }
  ]
}

In the editor it looks like so - However, when I export it OR see it as a preview via VSCode Extension, then I get the following -

[domoritz]

Ahh, the bug is in fact the renderer.

[jheer]

This is funny because symbol marks are not supposed to support scaleX and scaleY properties. So the problem is actually reversed: the Canvas renderer is correct and the SVG renderer is wrong, despite the design intention. Symbols should be uniformly sized using the size attribute. One should use the path mark (not the symbol mark) to use arbitrary x/y scaling.

The bug in Vega is that the parent logic for items drawn as paths supports scaleX/Y as part of the SVG transformation, but provides specialized logic for Canvas for the path mark only. I need to look at this more closely and decide whether to limit the functionality to the specification or to add more general Canvas support.

In any case, here is a modified spec that uses the path mark to achieve the scaled triangles. (There were also some errors in the example spec that I removed: a fill encoding not housed in an enter/update block, a lingering VL type property, etc.)