DEV Community

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

Collapse
 
samymp profile image
SamSam

I've had to do a similar project during my studies, which made me notice something I struggled fixing when I coded it : when you resize the window, the cursor no longer paints where you click but a few (or several) pixels away.

It's up to you to try and fix that if you want, but good job anyway :)

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...