-2

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.

Jack Stein
  • 123
  • 1
  • 14

1 Answers1

1

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)

Benjaco
  • 303
  • 3
  • 11
  • Quick question for Benjaco. I am back on this project. How did you generate the image for the farm at https://i.postimg.cc/SNjPPZGJ/farms-map.png? Thanks. Jack – Jack Stein Apr 29 '23 at 20:51
  • @JackStein, I didn't generate anything, do you mean how would I do it? If so, have the different elements and geomatries in different layers, and then draw the grass, then all roads, then trees ect. – Benjaco Jun 17 '23 at 16:20