I am trying to detect pointerdown/pointermove/pointerupmouse event. I wrote the code below for event detection.

document.addEventListener("pointerdown", mouse_click, false);
document.addEventListener("pointerup", mouse_release, false);
document.addEventListener("pointermove", mouse_move, false);

generally works fine, but "pointerup" is missing if the pointer is over the image when the mouse is released. However, I discovered that if I do createElement('canvas') before releasing the mouse, it works.

    canvas = document.createElement('canvas');
    canvas.width=window.document.body.scrollWidth
    canvas.height=window.document.body.scrollHeight
    document.body.appendChild(canvas);

I don't know why this works. Could you please explain why?

Thank you for reading.