HTML5 canvas: how do I query or modify the underlying bitmap dimensions as opposed to the DOM element dimensions?

Question

I'm using an HTML5 canvas element:

<style>
    #myCanvas {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
</style>

 <canvas id="myCanvas" ontouchstart="..." />

I understand that there is an underlying bitmap, and then there is a DOM element that this bitmap is boxed in, and the 2 objects have different dimensions, so e.g. the bitmap is scaled/squished to fit into the DOM element. It would be easier for me to understand if the bitmap dimensions always equalled the DOM element dimensions, but that's not how it works.

How do I query the respective dimensions? How do I set the respective dimensions? How do I see the 2 sets of dimensions in the Chrome developer tool? How do I keep the 2 sets of dimensions in sync?

This is important because mouse-clicks and finger touches are delivered in DOM coords but we'd usually need to interpret them in canvas coords.

(And a related question: have I done it correctly, to set the DOM element to expand to the maximum dimensions allowed by the parent?).

The bitmap dimensions are tailored by the Element's height and width attributes/properties. What you are talking about is the CSSOM size, and you just have to ignore it... — Kaiido, Aug 14 '18 at 12:54
Using CSS h/w to style CSS can have warping effects. `canvas.height` and `canvas.width` are probably the way to go, and you can query the element you want the canvas to fill and set canvas dimensions accordingly. Check [this thread](https://stackoverflow.com/questions/4938346/canvas-width-and-height-in-html5/4939066) out (and [this](https://stackoverflow.com/questions/2588181/canvas-is-stretched-when-using-css-but-normal-with-width-height-properties), while you're at it), and if you want this to resize, look into [debouncing](https://css-tricks.com/debouncing-throttling-explained-examples/). — ggorlen, Aug 14 '18 at 21:47
Also, if you post a sketch or description of what you're trying to accomplish, I (or someone else) can answer the question with a relevant example. — ggorlen, Aug 14 '18 at 21:49

score 0 · Answer 1 · answered Aug 15 '18 at 23:44

To get the dimensions of the canvas's underlying bitmap:

var w = canvas.width;
var h = canvas.height;

To get the dimensions of the DOM element:

var w = canvas.clientWidth;
var h = canvas.clientHeight;

To set the canvas's underlying bitmap:

canvas.width = 900;
canvas.height = 400;

To set the DOM element's dimensions, this is down to CSS styles and whatever else is on the screen and it's a more complex question.

In Chrome, "Developer Tools", Chrome displays the DOM element dimensions and I couldn't find any way to get the canvas underlying bitmap dimensions other than typing in "canvas.width" and "canvas.height" into the commandline.

As for trying to arrange such that height==clientHeight and width=clientWidth , I would guess that it's possible but it's probably also difficult and probably undesirable.

So to map a touch action or mouseclick from DOM element coords to canvas bitmap coords, a simple scaling operation seems sufficient:

function elementCoordsToCanvasCoords(X,Y)
{
    X = X * canvas.clientWidth / canvas.width;
    Y = Y * canvas.clientHeight / canvas.height;
    return [X,Y];
}

function onTouchStart(event)
{
    fingerStart(event.changedTouches[0].clientX, event.changedTouches[0].clientY);
}

function fingerStart(X, Y)
{
    [X,Y] = elementCoordsToCanvasCoords(X,Y);
    ...
}

HTML5 canvas: how do I query or modify the underlying bitmap dimensions as opposed to the DOM element dimensions?

1 Answers1