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


Handling iOS out of memory warning for images in web applications

It seems that one of the main problems with websites on iPad when handling with a lot of images is the limited memory reserved for images. If you have a lot of big images you will start seeing white boxes instead of your pictures when viewing the site on the iPad.

It seems somehow that Safari for iOS ignores the memory limit for background images, so you can consider substituting your img with divs with background-image to avoid hitting against the limit.

This is also valid for iOS Applications that use UIWebView.