Можно ли узнать координаты квадрата внутри canvasa?

Код При повторном нажатие кубик начинает двигаться с координат X:0 Y:0 и кубик не должен выходить из канваса

Как референс

da

Ответы (1 шт):

Автор решения: vp_arth

Сохраняйте позицию мыши и квадрата при mousedown и вычитайте её в mousemove.

drawRect(0, 0)
const rectPos = {x: 0, y: 0}
const edge = (c, min, max) => Math.max(min, Math.min(max, c));
canvas.onmousedown = (e) => {
    const start = {x: e.offsetX, y: e.offsetY};
    canvas.onmousemove = (e) => {
        drawRect(
          edge(rectPos.x + e.offsetX - start.x, 0, 600-50), 
          edge(rectPos.y + e.offsetY - start.y, 0, 500-50)
        );
    }
    canvas.onmouseup = (e) => {
        rectPos.x = edge(rectPos.x + e.offsetX - start.x, 0, 600-50);
        rectPos.y = edge(rectPos.y + e.offsetY - start.y, 0, 500-50);
        canvas.onmousemove = null
    }
}
→ Ссылка