How to draw a 1cm wide square in html5 canvas? - html

Question

Drawing a black square on white background is easy using canvas API.
Nevertheless, a lot of devices have different window.devicePixelRatio values, but even if they do, the physical size of a pixel might differ.
Can the needed scaling factor be retrieved using HTML5 APIs?
If not, how it can be determined using more low level host OS APIs (lets say, linux, windows, android, ios, osx ...

Answer 1

There is really no way to know how large 1 cm would be on the screen. The browser has just a generic concept of the DPI for the screen which is typically 96 DPI. However, you could be sitting by a 19" or a 32" monitor - the browser wouldn't know and 1 cm would be very different in size between them assuming they are defined by the same number of pixels.
You will have to manually calibrate for each monitor by physically measuring the size and then convert this to number of pixels per cm or inch when it comes to browsers.
Old-tech method
I made this simple tool (see below) to do basic calibration - it won't give you a scientifically exact result, but a close enough result. And yes, you would have to put a physical ruler onto the screen to measure and adjust the slider so that the lines matches up with the ruler. This is of course not so practical to ask users to do, which is a drawback... (it can be modified to take a known object of a known size instead). Separate X/Y as needed.
When you then have the DPI (or PPI) for your screen, you can use that as a scale factor for anything that goes onto the screen, as well as its inverse (1/ppi) for the other direction, from screen to path etc.
The scale factor is calculated dividing the result on 96.
var c = document.querySelector("canvas"),
ctx = c.getContext("2d"),
rng = document.querySelector("input");
ctx.translate(0.5, 0.5);
ctx.font = "16px sans-serif";
ctx.fillStyle = "#c00";
(rng.oninput = render)();
function render() {
var v = +rng.value, sepDist = 4; // 4"
ctx.clearRect(-0.5, -0.5, c.width, c.height);
ctx.strokeRect(0, 0, v, v); // draw 1:1 pixels:ppi
ctx.fillText(v + " PPI", 10, 20);
// draw marks which should be 4 inches apart
ctx.fillRect(0, 0, 3, 140);
ctx.fillRect(96 * sepDist * (v / 96), 0, 3, 140); // assuming 96 DPI base resolution
ctx.fillText("------ Should be 4 inches apart ------", 50, 140);
ctx.fillText((v / 96).toFixed(2) + "x (96 DPI)", 10, 40);
}
<label>Adjust so square below equals 1x1 inch:
<input type=range value=96 min=72 max=150></label>
<canvas width=630 height=300></canvas>