How can I find the area of the triangle on the html canvas?

Question

So I have a rectangle drawn.

When the user clicks anywhere on the canvas I want the area of the top two corner points of the square and the coordinates of the mouse click to be determined.

I've googled the formula for the area of a triangle and checked it many times and am sure its right. It's just not working.

I'll know I'll have it right when the area of the triangle is smaller numerically than that of the square, when the user clicks inside the square. The only problem is that it actually comes out much greater, and I'm not sure how to proceed from here.

I think the issue might be how I'm finding the mouse coordinates in the first place, but I'm not sure what to do.

If anyone has any insight into this, that would be very much appreciated.
Code below:
https://code.sololearn.com/WI39ZX9lXXxE/#

Answer 1

Did you find a solution to your problem? I tried it on my phone and it detected the rectangle click just fine even if I moved them away(overflow/scrolled).
Also it sees that you are using the right way to get the mouse position.

But may I ask why you need these triangle calculations? Couldn't you just check (using if), if the coordinate clicked X was greater than the position x of the rectangle and less that the position x of the rectangle + its width. (Doing the same for the y-Aches just using the y Coordinates (; )