HTML5 canvas: как запросить или изменить базовые измерения растрового изображения в отличие от измерений элемента DOM?

Question

Я использую элемент HTML5 canvas:

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

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

Я понимаю, что есть базовое растровое изображение, а затем есть элемент DOM, в который упаковано это растровое изображение, и эти 2 объекта имеют разные измерения, поэтому, например, растровое изображение масштабируется / сокращается, чтобы вписаться в элемент DOM. Мне было бы легче понять, если размеры растрового изображения всегда равнялись измерениям элемента DOM, но это не так.

Как я могу запросить соответствующие размеры? Как мне установить соответствующие размеры? Как просмотреть 2 набора измерений в инструменте разработчика Chrome? Как мне синхронизировать 2 набора измерений?

Это важно, потому что щелчки мышью и касания пальцами доставляются в координатах DOM, но нам обычно нужно интерпретировать их в координатах холста.

(И связанный с этим вопрос: правильно ли я сделал, чтобы элемент DOM расширялся до максимальных размеров, разрешенных родителем?).

Answer 1

Чтобы получить размеры базового растрового изображения холста:

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

Чтобы получить размеры элемента DOM:

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

---

Чтобы установить базовое растровое изображение холста:

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

Чтобы установить размеры элемента DOM, это касается стилей CSS и всего, что находится на экране, и это более сложный вопрос.

---

В Chrome, "Инструменты разработчика", Chrome отображает размеры элемента DOM, и я не смог найти никакого способа получить холст, лежащий в основе размеров растрового изображения, кроме ввода "canvas.width" и "canvas.height" в командную строку.

---

Что касается попытки устроить так, чтобы высота ==clientHeight и width=clientWidth, я бы предположил, что это возможно, но это, вероятно, также сложно и, вероятно, нежелательно.

---

Поэтому для сопоставления действия касания или щелчка мышью из координат элемента DOM в координаты растрового изображения холста достаточно простой операции масштабирования:

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