How to make Firefox's canvas behave the same as in Chromium-based browsers?

Question

In Chromium-based browsers (I'm using brave), canvas is rendering this way:

But in Firefox, for some reason, it's rendering this way:

Here is the method I'm using:

context.drawImage(image, 100, 100, 100, 400);

I'm not using any CSS on the canvas element, just this:

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

And this to resize and append the canvas:

const canvas = document.createElement("canvas");
document.body.appendChild(canvas);

export const graphics = canvas.getContext("2d");

const adaptResolution = () => {
  canvas.width = innerWidth;
  canvas.height = innerHeight;
};

adaptResolution();
addEventListener("resize", adaptResolution);

Can I make the Firefox's canvas behave the same as in Chromium-based browsers? What is causing this difference and how can I fix it?

This is the SVG I'm trying to render on screen:

user_3702797 · Answer

This is an interop issue that I already reported on the specs.
Unfortunately it didn't get much traction yet...

The issue is that it's currently unclear on which "image" drawImage's resizing options should act. Chrome considers that it should treat the input svg at its default size and stretch it, Firefox considers that the resizing options are the output box and will adapt the svg content to this box.

To get Chrome's behavior in Firefox, you can add a preserveAspectRatio="none" attribute to the root of your SVG image:

const svg = new Blob([`


`], { type:"image/svg+xml"});
const img = new Image();
img.src = URL.createObjectURL(svg);
img.onload = e => document.querySelector("canvas").getContext("2d").drawImage(img, 0, 0, 100, 400);

How to make Firefox's canvas behave the same as in Chromium-based browsers?

1 Answers