CSS dynamic image masks
It`s try to add dynamic masks to FlashJS.
Very tricky and works only in Chrome/Safari.
Anyway it`s first dynamic raster mask in HTML I`ve ever heard.
For FlashJS users it just looks like:
objectA.mask = objectB;
objectB.graphics.drawCircle(x,y,r);
But how it looks like behind the scene?
There is -webkit-image-mask CSS property.
It can be set not only with file URL, but with data:URL as well.
And it`s possible to save any canvas to data:URL and set this string as mask.
In this demo you draw some circles on invisible canvas by moving mouse over scene, canvas converts it`s pixels to data:URL string which applies to -webkit-image-mask property (in case it has changes).
Hope this CSS property would be improved to catch JS vars directly and would be implemented in every browser.