Comments on: Detecting Clicks on Rotated Rectangles

By: Jack Stein

Jack Stein — Thu, 24 Mar 2022 18:58:15 +0000

I used this code as a prototype for what I need and it worked with the mods that Christian pointed out.

Thank you.

Jack

By: How do I rotate, scale and translate on Html5 Canvas? - Tutorial Guruji

How do I rotate, scale and translate on Html5 Canvas? - Tutorial Guruji — Thu, 24 Jun 2021 09:37:46 +0000

[…] If I have time tomorrow I will try to implement the following to your code but I can provide you with a working example of how to get mouse collision precision on a rotated rectangle. I had the same struggle with this and finally found a good explanation and code that I was able to get to work. Check out this website […]

By: Me

Me — Fri, 11 Jun 2021 13:42:15 +0000

Great tutorial! I was able to hack this into my own code. I calculate my vertices differently but using your triangleArea and clickHit functions got the results needed. Thanks a bunch!

By: Christian

Christian — Sat, 27 Feb 2021 14:55:13 +0000

First of all, thank you so much for this in-depth explanation! This is so easy to consume and, following this guide, makes it a breeze to actually understand what’s going on.

I found two things that didn’t work for me and needed changes in code, which may be due to my specific implementation, but seem to be generic:

In findRectVertices, line 15, you’re calculating the center point:
var center = [ right – left, bottom – top ];

However, this code just yields the width & height, and doesn’t take into account the position of the rectangle. I made it work by changing it to this:
var center = [ left + size[0] / 2, top + size[1] / 2 ];

Finally, in the clickHit-function you return true if the triangle areas are larger than the rectangle:
if (triArea > rectArea) {
return true;
}
return false;

In my case, that returns true if there wasn’t a hit, and false if there was a hit, so I changed it to this:
return (triArea <= elArea);

Thank you again for this post, you've really helped me out!