— Pixels Commander

[ In English, На русском ]

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;

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.

  • http://anykeytocreate.blogspot.com/ Eugene Krevenets (Hyzhak)

    i have some lags in chrome. Sometimes the hair become visible, less than one second.

  • http://twitter.com/PixelsCommander Denis Radin

    The reason is that browser renders image during CSS property is being assigned and not ready yet. It`s a lot of job for browser to save canvas as string and assign resulted huge string to CSS property.

    There are no any solutions for this yet. But there is simple workaround – if you`ll shave this guy on click, not by timer – there would be no any artifacts.

    It can be fixed only by implementing more generic interface between mask-image CSS property and JavaScript. I`ll report this issue to webkit and mozilla trackers.

  • Anonymous

    Simply put, great stuff.

  • Thenexus

    pleeeease this html5/css3 thing is no near flash, so many bugs, so many differences. only workarounds workarounds and more workarounds… and still his hair is there))))

  • Anonymous

    http://flashjs.com is like flash, not this stuff, it was experimental part of FlashJS lib, but was not included because works only in chrome / safari and FlashJS is cross-browser thing.