CanvasRenderer and SVGRenderer do not give the same output when given a scaleFactor

[Alexis Pister]

Hi,

Firstly, thanks for your work on this project!

I am working on a project that uses vega-scenegraph to render some visualizations. This is done the following way:

// renderer is either canvas or svg
const Renderer = (renderer === "canvas") ? CanvasRenderer : SVGRenderer;

// origin is a translation of the type [x, y], zoom is the scaleFactor of type number, and scene a scenegraph object
const r = new Renderer()
    .initialize(el, width, height, origin, zoom)
    .render(scene);

I noticed that the output is different for SVG and canvas, when I specify a scaling factor (zoom variable). The scaling does not seem to be applied using canvas on the elements of the visualization.

Here is the diff that solved my problem:

diff --git a/node_modules/vega-scenegraph/src/util/canvas/resize.js b/node_modules/vega-scenegraph/src/util/canvas/resize.js
index 85c0836..5223e10 100644
--- a/node_modules/vega-scenegraph/src/util/canvas/resize.js
+++ b/node_modules/vega-scenegraph/src/util/canvas/resize.js
@@ -24,9 +24,10 @@ export default function(canvas, width, height, origin, scaleFactor, opt) {
   context.pixelRatio = ratio;
   context.setTransform(
     ratio, 0, 0, ratio,
-    ratio * origin[0],
-    ratio * origin[1]
+    ratio * origin[0] * scaleFactor,
+    ratio * origin[1] * scaleFactor
   );
+  context.scale(scaleFactor, scaleFactor);
 
   return canvas;
 }

The canvas and SVG outputs are the same after this change in my use case. However, it seems to break the "vg2png generates scaled PNG output" test.

Here is the output with canvas

and here is with SVG:

For a width and height of 1050, a zoom of 1.5, and a origin of [300, 100] for both images. I also just realized that the total size of the SVG is dependant of the zoomfactor, while the size of the canvas stays the same for any value of the scalingFactor.

This issue body was partially generated by patch-package.

[Dominik Moritz]

Thanks for the issue. Please add an example that shows how the outputs differ.

[Alexis Pister]

Thanks for the issue. Please add an example that shows how the outputs differ.

Sure, I added the pictures on the first post.

[Dominik Moritz]

Can you add a spec as well? Ideally a minimal example that reproduces the issue.

[Alexis Pister]

This is actually not rendered with a vega spec, but another grammar that generates a vega scenegraph, that is then rendered with the code I put in the original post.

Here is the scene for this example, if this is of any help:
scene.json

[Dominik Moritz]

That's hard to debug since it contains unresolved reverences. It sounds like you understand Vega well enough that you might be able to debug the issue yourself.

[Alexis Pister]

Well, the code I put on the first post solves the issue in my case, but I found this through trial and error and it seems to break a test case.. I can spend more time in finding a better solution, but the implementation of the scenegraph is still pretty obscure to me and I only have a general sense of how it works. A documentation or a small description of the main functions and properties of the vega-scenegraph submodule would help greatly.