DEV Community

Discussion on: I've created an awesome painting app using React and Canvas API

Collapse
 
jeremierousseau profile image
JeremieRousseau

yes if your canvas is not clipped to the border top and border left, you must to use something as this :

scrolledY = Math.ceil( window.scrollY );

 x = event.clientX - Id("canvasToDraw").offsetLeft;
 y = event.clientY + scrolledY  - Id("canvasToDraw").offsetTop; 
Enter fullscreen mode Exit fullscreen mode

to compute where is your point on the canvas and this point with the border, and on a android tablet i use this :
x = Math.floor( event.touches[0].clientX - Id("canvasToDraw").getBoundingClientRect().left );
y = Math.floor( event.touches[0].clientY + scrolledY - Id("canvasToDraw").getBoundingClientRect().top );

and you must manage the scroll, so the scroll is at 0 with variable scrollY.

make a real software is fun, but that can become a real headache sometime...