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


Canvas 3D and various modern web technologies reflections

Every ~10 years we face an incredible new technology that looks a lot like an old technology that spent his life in total oblivion.

Recently we faced the return of clustered computing under the new brand of cloud computing, we faced the return of time sharing systems under the software as a service paradigm and recently 3D movies have returned to life from 1970. Technology improves and sometimes we recall that something that we already tried can be made better and released under a new less geeky brand.

Recently HTML5, which is trying to remove the need for plugins for nowadays common actions (like playing videos online) and to stop the HTML vs XHTML war by permitting to integrate SVG and MathML in HTML, caused the return of the idea of making complex graphic online.

Indeed being able to draw a few pixels using <canvas> doesn’t mean being able to draw complex 3D graphic and so we started to see the old idea of VRML getting new life under the flag of Canvas3DL and O3D. (Actually VRML and Canvas3DL/O3D have little in common, but we are still talking about 3d graphic on web)

This was quite inevitable and I think that in HTML6 we will probably see some kind of 3D API integrated inside the standard canvas, but for now I’m just curious to see if they will be used for something good or if they will face the same doom as VRML and flash which have been used 90% to create disturbing and useless web pages, animations and introductions.

Anyway, Cadie was already moving on this front and has provided the solution for 3D web

At least it would be cool to be able to retrieve your heavy machine gun inside Quake6 with jQuery(‘#machinegun’) but, as the world hates me, 3D objects won’t be part of the DOM and will only rely on your javascript heap, I’m very sad about this :/