Results 1 to 5 of 5

Thread: Canvas Physical Size

  1. #1
    Join Date
    Jun 2011

    Canvas Physical Size

    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?

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

  3. #3
    Join Date
    Jun 2011
    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";

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

    // Remove the test element.

    // 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"/>

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

  4. #4
    Join Date
    Aug 2007
    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.

  5. #5
    Join Date
    Jul 2008
    urbana, il
    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...
    Create, Share, and Debug HTML pages and snippets with a cool new web app I helped create: pagedemos.com

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center