svg drawn to canvas positioned and scaled wrong
Categories
(Core :: Graphics: Canvas2D, defect)
Tracking
()
People
(Reporter: jedierikb, Unassigned)
Details
Attachments
(1 file)
7.38 KB,
image/png
|
Details |
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
Comment 2•4 years ago
|
||
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.
Comment 3•4 years ago
|
||
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.
Description
•