CODEWITHSUNDEEP
javascripthtmlcanvasdpi
heltonbiker
heltonbiker

Reputation: 27575

Is it possible to draw on html canvas with true (real world) dimensions?

I am trying to represent the blinking of a LED matrix using HTML Canvas. It is important to me that the size of each LED and the distance between them represents their true dimensions in the real world (measured in milimeters, for example).

If I find a "pixel to milimiter" multiplier for one computer (I did this experimentally for my home computer), it almost certainly will fail for other computers (as it did at work, with a different dot-pitch monitor).

So, I wonder if there is a way to draw physical things on canvas and get their actual visual size in a device-independent way.

I plan do work only with desktop computer (laptop maybe), so mobile is not needed for my case.

Upvotes: 3

Views: 1108

Answers (1)

Joshua Carmody
Joshua Carmody

Reputation: 13730

To my knowledge it is impossible to reliably detect the physical size of the monitor from inside an HTML page. You can only know how many pixels it has.

If this is a hard-requirement, my best suggestion would be to have the user calibrate the app somehow. Perhaps you could ask them how big their monitor is, and then scale your app based on that.

Here's a quick-and-dirty example of how that might be done:

<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript">

    function recalculate()
    {
        var mmPerInch = 25.4;
        var textBoxValue = document.getElementById("input_inchsize").value;
        var monitorSizeInInches = parseInt(textBoxValue);
        if(!monitorSizeInInches)
        {
            alert("Invalid monitor size");
            return;
        }

        var screenDiagonalInPixels = Math.sqrt((screen.width * screen.width) + (screen.height * screen.height));
        var screenPixelsPerMm = screenDiagonalInPixels / (monitorSizeInInches * mmPerInch);

        draw100MmSquare(screenPixelsPerMm);
    }

    function draw100MmSquare(pixelsPerMm)
    {
        var canvas = document.getElementsByTagName("canvas")[0];
        var context = canvas.getContext('2d');

        context.fillStyle = "rgb(255,00,00)";
        context.fillRect (0,0,100 * pixelsPerMm,100 * pixelsPerMm);
    }

    window.addEventListener("load", function() { 
        document.getElementById("button_calibrate").addEventListener("click", recalculate, false);
    }, false);
</script>       
</head>
<body>
    <p>How big is your monitor, in inches?</p>
    <input type="number" id="input_inchsize">
    <button id="button_calibrate">Calibrate</button>
    <p>After hitting "Calibrate", a box should appear below that measures 100mm to a side on your screen</p>
    <canvas width="1000" height="1000">

    </canvas>
</body>
</html>

Here's a JSFiddle you can try.

Of course, this method assumes the pixels on the screen are square, which they might not be. You could ask the user to enter the width and height of their monitor and calibrate those separately. But I think users are more likely to know the diagonal size in inches (at least in the USA, where I'm located).

Upvotes: 1

Related Questions