Home

Canvas OnClick CoOrdinates

Blog Date 16 November 2021

The Code

    <canvas 
        id="MyBox" 
        width="500" 
        height="500" 
        style="border-style: solid; border-width: 1px;" 
        onclick="DoClick(event)"
        />

<script>
        function DoClick(event) {
            console.log(event.offsetX + "-" + event.offsetY);
        }
</script>

The Explanation

Looking this up on StackOverFlow etc etc comes up with a lot of answers and, as ever, they are usually incredibly complex. Pfffft. 

Do your canvas this in the HTML with an onclick passing "event". Then use the event.offsetX and event.offsetY. This works for me so far in Opera and Edge, latest updates for this date.

Reader's Comments

Post Your Comment Posts/Links Rules

Name

---

Comment

---

Add a RELEVANT link (not required)

---

Upload an image (not required)
Uploading...

---

---

Home