everyone. I made a different sizes canvas and drew a line with the same values for moveTo() and lineTo() but I get different sized lines.
This is the code.
function testCanvas(height, width){
canvas = document.createElement("canvas");
ctx = canvas.getContext('2d');
canvas.style.display = "inline-block";
canvas.style.border = "1px solid black";
canvas.height = height;
canvas.width = width;
document.getElementById("chartContainer").appendChild(canvas);
}
function drawLine(x1, y1, x2, y2){
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.stroke();
}
When i go to inspect element > console and call:
testCanvas(300,300);
drawLine(10,50,110,50);
and
testCanvas(150,150);
drawLine(10,50,110,50);
The length of lines is not equal. Now, if the input for moveTo and lineTo were in pixel unit, these lines would have same length isnt is? What is the default unit here?
There is no real "unit" per se.
These values vary depending on the Current Transformation Matrix (CTM), that you can modify using methods like scale(), rotate(), transform() etc.
But with the default CTM, a value of 1 will represent 1 pixel in the canvas output buffer.
So what certainly happens here is that your canvas are resized through CSS.
CSS will stretch or shrink the canvas, making its image look different than what its buffer actually is:
let canvas, ctx;
function testCanvas(height, width) {
canvas = document.createElement("canvas");
ctx = canvas.getContext('2d');
canvas.style.display = "inline-block";
canvas.style.border = "1px solid black";
canvas.height = height;
canvas.width = width;
document.getElementById("chartContainer").appendChild(canvas);
}
function drawLine(x1, y1, x2, y2) {
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
testCanvas(300,300);
drawLine(10,50,110,50);
testCanvas(150,150);
drawLine(10,50,110,50);canvas { background: #CCC; vertical-align: top }
:checked ~ div canvas {
width: 300px;
height: 300px;
}<input type=checkbox>set size through CSS
<div id="chartContainer"></div>To avoid that, avoid setting the canvas size through CSS.