How to check if canvas objects overlap with each other
I am trying to check if two objects (like rectangle and triangle) overlap each other on HTML5 canvas.
Currently I can only verify this by looking at the screen (by setting globalCompositeOperation = 'lighter').
My first idea would be to scan the entire content of the canvas if the color is "lighter" on the canvas (compare the code snippet above). But for that I would have to look at every pixel, which would be costly for what I needed.
Is there a (better) alternative to automatic checking if they overlap?
Sincerely.
+3
source to share
1 answer
The following site explains how to use the dividing axis theorem to determine if two convex shapes overlap.
http://www.codezealot.org/archives/55
To use this, you need the coordinate data used when constructing the shapes.
+3
source to share