HTML5 Canvas API on a memory-saving 1bit per pixel CanvasRenderingContext?

Question

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 800x600 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

Answer 1

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.

Answer 2

Maybe my reply's a bit late and simple - with WebGL what people are doing is a pick-mode rendering pass on mouse down -

1. mouse down at (x,y)
2. set 1x1 pixel viewport {x,y, x+1,y+1)
3. render display list, with a separate arbitrary color for each element, mapped to the element
4. then (after Z-buffering) the 1x1 pixel frame buffer contains a single pixel of the colour of the nearest element - read the pixel and find the mapped element

Well that's theory!