Closed Bug 1702272 Opened 4 years ago Closed 4 years ago

svg drawn to canvas positioned and scaled wrong

Categories

(Core :: Graphics: Canvas2D, defect)

Firefox 87
defect

Tracking

()

RESOLVED INVALID

People

(Reporter: jedierikb, Unassigned)

Details

Attachments

(1 file)

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36

Steps to reproduce:

Here is a svg:

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="300" viewBox="0 0 500 300">
<rect x="0" y="0" width="500" height="300" fill="#f00"/>
</svg>

And here is simple javascript:

var i = new Image();
i.addEventListener("load", () => {
  var c = document.getElementById("c");
  c.style.border = "1px blue solid";
  var ctx = c.getContext("2d");
  ctx.drawImage(i, 20, 20, 460, 260);
});
i.src = "test.svg";

I load the svg and render it to a canvas, indenting slightly by 20px on all sides via parameters to drawImage

Actual results:

The svg is positioned scaled incorrectly along the X axis.
You can demo the issue here:
https://codesandbox.io/s/scaled-svg-in-canvas-5fv11

Expected results:

The svg should be positioned and scaled correctly.

screenshot of the canvas with the incorrectly positioned and scaled svg

The Bugbug bot thinks this bug should belong to the 'Core::Canvas: 2D' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Component: Untriaged → Canvas: 2D
Product: Firefox → Core

The SVG root element has a viewBox so we must preserve the aspect ratio of that viewBox i.e. 5:3 We seem to do that and Chrome does not.

Status: UNCONFIRMED → RESOLVED
Closed: 4 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: