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