The current issue I am having is that when I scroll the image on the canvas the ability to manipulate the drawn polygraph is lost. Is there some way to address this in the code?

In the following jsfiddle.net/heldersepu/egt92403/36 and it is related to a post I put up in Validate if mouse position is within rotated rectangle in HTML5 Canvas and got help from Helder Sepulveda.

CodePudding user response：

You are using event.clientY and event.clientX to get the position of the mouse, those 2 properties is relative to the screen.

You can either use event.pageY and event.pageX to get the coordinates relative to the document (those 2 properties are not effected by scroll) Or offset the positions your self with window.scrollY and window.scrollX, an example of that can be seen here https://jsfiddle.net/faex5Lqc/2/ (important part event.clientY - canvas.offsetTop window.scrollY)