Canvas Physical Size

[dbradley]

My javascript canvas width and height are both 960. I have found that my screen horizontal and vertical resolutions are both 96 dpi. Thus, when a drawing is rendered in the full width and height of the canvas, it should be measurable by a ruler to be physically 10 inches by 10 inches. I did measure the display on the screen and found it to be actually about 11 and 3/16 inches wide. What is the proper way to scale a canvas so that the resulting physical dimensions can be calculated more precisely?

[Declan1991]

Not sure why you want to do this, but it works fine for me. You must have your browser zoomed or screen resolution changed.

[dbradley]

Thanks for your reply. I have tried it on both Firefox and Chrome, making sure that the zoom setting is reset first. Please check out the code below which gets screen resolution (function xyDpi returns 96 dpi) then uses it to draw a rectangle of specified size. It should be 10" but measures at over 11".


$(document).ready(function() {

// Get the canvas and its context.
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");

$('#btnPhysSizeRect').click(function() {
// Draw a rectangle of a specified physical width and height.

canvas.setAttribute('width', ctx.canvas.width); // clears the canvas
var widthInch = 10; // Actually measures about 11 1/16 ".
var heightInch = 10; // Actually measures about 11 1/16 ".
var screenres = xyDpi(); // Array[xDPI,yDPI], 96dpi for both.
var x = 0; // X distance right from top left.
var y = 0; // Y distance down from top left.
var width = widthInch * screenres[0]; // Total width.
var height = heightInch * screenres[1]; // Total height.
var colorFill = "#00cccc";
FilledRectangle(ctx, x, y, width, height, colorFill);
});
});

function xyDpi() {
// Determine X and Y screen DPI resolution; return them in a
// 2-dimensional array.

// Create 10" square div using points.
var testDiv = document.createElement("div");
testDiv.style.height = "720pt";
testDiv.style.width = "720pt";
testDiv.style.visibility = "hidden";
document.body.appendChild(testDiv);

// Retrieve pixel measurements.
var xres = testDiv.offsetWidth / 10;
var yres = testDiv.offsetHeight / 10;

// Remove the test element.
testDiv.parentNode.removeChild(testDiv);

// Return results in an array.
return Array(xres, yres);
}


function FilledRectangle (ctx, x, y, width, height, colorFill) {
ctx.fillStyle = colorFill;
ctx.fillRect(x, y, width, height);
}

<td style="width: 150px">
<input id="btnPhysSizeRect" type="button" value="Phys Size Rect" style="width: 150px"/>
</td>

<canvas id="myCanvas" width="1400" height="1400">
</canvas>

[Declan1991]

testDiv.style.height = "720pt";
testDiv.style.width = "720pt";

Didn't give it much of a look because I'm not that used to these, but pt and px are quite different. Don't really know, but 720 px might be what you are looking for.

[rnd me]

your screen dpi depends on how big your monitor is compared to the desktop resolution you have set.

there's not some magic setting that's gonna tell all apps how big your screen is physically, otherwise CSS inches would work just fine...