Is there a way to use the HTML5 Canvas API on a memory-saving 1bit per pixel CanvasRenderingContext?
I’d like to create reverse lookup buffers for graphical objects that should receive interaction. There should be a buffer (w*h*1 bit) for each interactive object. Those pixels where the object is touchable would have the value 1 (it’s like creating a mask per object).
Then the question which objects are active in a visualization can simply be answered by asking each reverse lookup buffer if it’s colored ‘black’ at mouse position x/y.
I’d like to use this approach to ease the process of adding interaction to canvas-based visualizations.
In practice you would simply have to implement a draw(ctx) method (as usual) and only if you want to have interaction, an additional mask(reverselookupbuffer) method that marks the area where the object should be touchable (e.g. simply a rectangle in case of some text)
To implement this efficiently I need a simple pixel buffer that only stores 1bit per pixel. I don’t need colors here.
With an additional, ordinaray canvas element I’d need lots of memory for storing masks for e.g. 100 touchable objects)
on a 800×600 canvas that would result in 800*600*32*100 bit = 183 MB, but only 5.6MB if I’d use a 1-bit bitmap.
What are your thoughts?
Thanks a lot,
Michael
I think Cake.js implements what you’re looking for http://code.google.com/p/cakejs/. It’s no longer being maintained though, so you could pick it up.