Canvas CompositeOperation different behaviour on WebKit and Firefox

Recently while coding a game/scene library for Canvas I had the idea of implementing pixel perfect collision by using an offscreen canvas where to draw the two objects alone and check if they collide.

This can be easilly done with the source-in/destination-in composite operation. If any pixel of the offscreen canvas if not white then the two objects collide. It seems a great idea, but I had a bad surprise when testing it on Chrome and Safari.

Indeed it seems that source-in and destination-in have been differently intended on webkit. I find the Mozilla implementation more useful, but as the Canvas 2D specifications are written it is difficult to understand what they mean by Display the source image wherever both the source image and destination image are opaque. Display transparency elsewhere

Here you can find a screenshot of the two different behaviours

FIREFOX Composition

WEBKIT COMPOSITION

Leave a Reply

Your email address will not be published. Required fields are marked *