Xử lý sự kiện mousedown và mouseup trên HTML5 Canvas

Để xử lý kéo thả (drag) hoặc vẽ tự do trên Canvas, bạn cần theo dõi trạng thái chuột qua mousedown, mousemove, mouseup.

Ví dụ cơ bản: Kéo layer

var mouseDown = false;
var dragOffset = { x: 0, y: 0 };
var mainLayer = { trans: { x: 0, y: 0 } }; // layer đang vẽ

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

canvas.onmousemove = function(event) {
  if (mouseDown) {
    mainLayer.trans.x = event.clientX - dragOffset.x;
    mainLayer.trans.y = event.clientY - dragOffset.y;
    redraw(); // hàm vẽ lại canvas
  }
};

canvas.onmouseup = function(event) {
  if (mouseDown) {
    // Xử lý click nếu không kéo (drag distance nhỏ)
    mouseClick(event);
    mouseDown = false;
  }
};

function mouseClick(event) {
  console.log("Click tại:", event.clientX, event.clientY);
}

Lưu ý quan trọng

• Sử dụng event.clientX/clientY (tọa độ viewport) hoặc event.offsetX/offsetY (tọa độ canvas) tùy nhu cầu.
• Cần gọi event.preventDefault() trong mousedown nếu không muốn chọn text/bôi đen.
• Đối với thiết bị cảm ứng, thêm xử lý touchstart, touchmove, touchend.
• Mã gốc có lỗi biến eevent (sai chính tả), đã sửa thành event.