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?).

Answer 1

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);
    ...
}