I have a HTML canvas which I want to use with Pointerlock to prevent people using the drawing tablet from clicking on other elements in the page. When not using Pointerlock there is no real difference between mouse/touchpad/wacom one. But when I use Pointerlock the cursor behaves real erratically and I cannot draw, the cursor seems to be outside of the canvas most of the time. Any idea what might be going wrong?
This is an example of the code I'm using to draw a cursor and lines:
const Y = lastPos.y + evt.movementY;
_removeCursor();
_cursorctx.beginPath();
_cursorctx.fillStyle = "#f00";
_cursorctx.arc(X, Y, 5, 0, Math.PI*2, true);
_cursorctx.fill();
if (mouseDown) {
_ctx.beginPath();
_ctx.moveTo(lastPos.x, lastPos.y);
_ctx.lineTo(X, Y);
_ctx.stroke();
}
lastPos.x = X;
lastPos.y = Y;
This method is connected to the mousemove event