modifying the polygraph on a canvas is not working when canvas image is scrolled

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.

1 answer

  • answered 2021-09-11 18:44 Benjaco

    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)

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum