When working with canvas, I have the ability to render objects using one coordinate system while manipulating how CSS displays them:
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(1920, 1080);
ctx.stroke();
#canvas {
width: 100px;
height: 100px;
border: 1px solid black;
}
<canvas id="canvas" width="1920" height="1080">
Your browser does not support the HTML5 canvas tag.</canvas>
Even though the line should appear as diagonal based on the JavaScript coordinates, CSS compresses it into a square with a 45° diagonal line.
In contrast, when working with SVG, CSS cannot alter the display in the same way.
#svg {
height: 100px;
width: 100px;
border: 1px solid black;
}
<svg id="svg" height="1080" width="1920">
<line x1="0" y1="0" x2="1920" y2="1080" style="stroke:rgb(255,0,0);stroke-width:2" />
Sorry, your browser does not support inline SVG.
</svg>
The coordinates in SVG are absolute and correspond directly to the screen's pixels.
Is there a way to draw lines in SVG based on the original width
and height
properties, but still have them conform to the element bounding box transformation set by the CSS?