จัดการ Mousedown และ Mouseup บน HTML5 Canvas

Track Mouse State ด้วย Flag Variable

var mouseDown = false;
var dragOffset = { x: 0, y: 0 };
var mainLayer = { trans: { x: 0, y: 0 } };

canvas.onmousedown = function(event) {
    dragOffset.x = event.clientX - mainLayer.trans.x;
    dragOffset.y = event.clientY - mainLayer.trans.y;
    mouseDown = true;
};

canvas.onmouseup = function(event) {
    if (mouseDown) {
        // Click event (ไม่ได้ Drag)
        mouseClick(event);
    }
    mouseDown = false;
};

canvas.onmousemove = function(event) {
    if (mouseDown) {
        // Dragging
        mainLayer.trans.x = event.clientX - dragOffset.x;
        mainLayer.trans.y = event.clientY - dragOffset.y;
        redraw();
    }
};

function mouseClick(event) {
    console.log('Clicked at', event.clientX, event.clientY);
}

ใช้ mouseDown flag แยก Click vs Drag clientX/clientY ใช้ตำแหน่งหน้าจอ (ไม่ใช่ Canvas-relative)