I am currently working on incorporating the Vuejs Draw Canvas from this Codepen example into my project as a component. The functionality is all working well, but I've noticed that the mouse position seems to be relative to the window. This causes issues when the canvas is not the same size as the window, leading to discrepancies between the cursor position and the actual draw position.
I attempted to adjust the canvas width and height to be offset values rather than based on the window size, like this:
setSize() {
this.c.width = this.c.offsetWidth;
this.c.height = this.c.offsetHeight - 60;
}
I also tried to handle the mouse position using code from answers on Stack Overflow, such as:
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: (evt.clientX - rect.left) / (rect.right - rect.left) * canvas.width,
y: (evt.clientY - rect.top) / (rect.bottom - rect.top) * canvas.height
};
}
Unfortunately, these adjustments did not solve the issue. I have reverted back and created a version in a code sandbox. If anyone can assist me in identifying the problem with the mouse position, I would greatly appreciate it. I believe the issue lies in the calculations of the mouse position, but I'm unsure of the exact location.
You can find the demo I'm trying to fix in this codesandbox link.