When I click the top left. The output is not x: 0, y: 0.

Question

https://code.sololearn.com/WnG4ZVkKIg5C/?ref=app

Answer 1

your code takes the location clicked on the entire screen rather than the canvas alone

so when you click on the canvas, it takes the location clicked relative to the entire screen

you can notice that better if you set
margin-left:30%;
margin-top:30%;
to the canvas in the css.
you will notice it then

what you need to do is find the offset of the screen edge to the canvas and play with that

good luck :)

Answer 2

hmm you made some changes and now the touch aint working well on my phone ;_;

edit
getting undefined for x and y

Answer 3

try playing with:

pos=c.getBoundingClientRect();
var x = evt.clientX-pos.left ;
var y = evt.clientY-pos.top ;

Answer 4

try:

var pos=c.getBoundingClientRect();
touch=evt.touches[0];
var x = touch.clientX-pos.left ;
var y = touch.clientY-pos.top ;

Answer 5

at last xD
good job >:p

Answer 6

also, add this at the start of the handler

evt.preventDefault();

it will prevent scrolling down when you move around

Answer 7

Burey: How can I do if I want x: 0, y: 0 when the mouse is hovering the top left of the canvas?

Answer 8

Yes, I've modified the event from 'click' to 'ontouchmove'

Answer 9

I think there is no clientX/Y property at the evt.

Answer 10

Yes! perfect! thank you very much.