How to get the right mouse position within canvas
mouse.x = event.clientX - canvas.offsetLeft;
mouse.y = event.clientY - canvas.offsetTop;
event.clientX is the mouse X position within browser viewport and is supported in all browsers.
the canvas.offsetLeft (p401) is the pixels between the element's outside left border and the containing element's inside left border.
The reason why it needs two positions to calculate mouse.x is because the pixels in canvas based on its own dimension. so within canvas, if the clientX is 500px, but in canvas maybe it's only 100px that's because canvas is 400px away from the left border of viewport.