How to check users click on screen (X and y ) using canvas?

Question

No code~

Answer 1

https://code.sololearn.com/WNnT7t33cafL/?ref=app
Made this a while ago
It's simple and does exactly what you need and should be pretty easy to copy and learn from

Answer 2

I see some answers which would work perfectly only if there's no other HTML Element or bounding box above the canvas. Suppose you have a large divs above the canvas, those functions wont work as expected because the canvas bounding element (not the drawing area) has now been distorted.
To fix this, you have to get the actual bounding context of the canvas and do some vector's manipulation to get it working.
Rect = canvas.getBoundingClientRect();
posX = abs(Rect.left - e.clientX)
posY = abs(Rect.top - e.clientY)
"abs" is simply a function defined as
const abs = x => x < 0? x : x

Answer 3

𝕄𝕚𝕔𝕙𝕒𝕖𝕝 𝕃𝕚𝕦 [🄰🄲🅃🄸🅅🄴] (っ◔◡◔)っ Ok I will add some comments to it now

Answer 4

Daniel Briceño what do you mean?

Answer 5

Ok and can you make an example code? Plz, Daniel Briceño

Answer 6

Daniel Briceño yes, canvas

Answer 7

Like I don't understand this
document.getElementById('x-value').textContent = e.x;
document.getElementById('y-value').textContent = e.y;
$("#player").css("transform","translate3d( " + e.x/1.5 + "px, " + e.y/1.5 + "px, 0px)");
});
Can you like make it normal canvas no simple? Like no # and e.x and more...

Answer 8

Hard. No code. Just HTML?

Answer 9

Daniel Briceño no. That is not what I want, plz delete your answers to make this question unanswered.

Answer 10

.... Is "JS" allowed?

Answer 11

𝕄𝕚𝕔𝕙𝕒𝕖𝕝 𝕃𝕚𝕦 [🄰🄲🅃🄸🅅🄴] (っ◔◡◔)っ My code should work with canvas but if not I can help you adapt it if you DM me

Answer 12

Pieter Edwards I was wrong. But that's how you learn.:)

Answer 13

Pieter Edwards can you make the code simpler? It is a bit hard to understand in the js.

Answer 14

So basically
e.x = The X axis co-ordinate
e.y = The Y axis co-ordinate
The document.getElementById bit is just making it so the X and Y co-ordinate is printed onto the page so is not necessary. Hope you understand now?

Answer 15

Pieter Edwards Try to use just JS please. JS must be taught first and then Jquery

Answer 16

Pieter Edwards can you use js? No jQuery

Answer 17

X = e.clientX-cnv.offsetLeft
Y = e.clientY-cnv.offsetTop
check line 29 & 30
where cnv is the canvas element.
https://code.sololearn.com/W6d0E0j5wCMB/?ref=app

Answer 18

In a course that I saw, how to do it came out and then sent it by form. Let me search....

Answer 19

check in <input type = "image" alt = "blablabla" />
https://www.mclibre.org/consultar/htmlcss/html/html-formularios.html

Answer 20

... Canvas does not have event support, but it can over a parent element: <div onclick = "fun (events);"> <canvas> </canvas> </div>