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?



source to share

1 answer

The following site explains how to use the dividing axis theorem to determine if two convex shapes overlap.

To use this, you need the coordinate data used when constructing the shapes.



All Articles