Bitjuice is a little library I made to do bitmap/raster graphics in the browser. The aim is to make it easy to write “Ajax graphics” – graphics you can update real-time in the browser. And at the same time, maintain compatibility with all major browsers and old browsers too. That’s why it doesn’t use any new-fangled SVG/Canvas APIs. Just a plain-old HTML table, where we manipulate the CSS cell background style.
Here’s an interactive Scratchpad, where you can play around with programming against the API. I think it’s neat that Ajax lets us make it this easy to get your hands dirty with a new API – no download, no install, no fuss!
How to use it? The API is like any typical drawing-on-a-canvas-type APi you’ve ever used.
*** BASIC USAGE *** var bitmap = new Bitmap(10,20); // width, height containerElement.appendChild(bitmap); bitmap.drawPoint(5,5,"pink"); // x,y,html colour
*** ADVANCED USAGE *** var bitmap = new Bitmap(10,20, {container:containerElement, blankColor:"gray"}); bitmap.drawLine(1,2,5,5,"pink"); bitmap.drawRect(1,2,5,5,"pink"); bitmap.drawFilledRect(1,2,5,5,"pink"); bitmap.destroy(); // Same as containerElement.removeChild(bitmap);
There’s various work to be done, mainly in optimising performance because I would like to make it possible to plot fairly quickly.
I can envision a a number of potential uses. Interactive bitmap editor, tool for learning Javascript or programming in general (the scratchpad), simulations such as Game Of Life (which I really want to implement), mathematical graphing, process monitoring.
It’s licensed under the liberal, non-viral, MIT License. Ships as a single JS file.



Bitjuice: Ajax bitmap API - help.net // May 27, 2007 at 9:43 pm
[...] Bitjuice: Ajax bitmap API Bitjuice is a little library to do bitmap/raster graphics in the browser. The aim is to make it easy to write “Ajax graphics†– graphics you can update real-time in the browser. And at the same time, maintain compatibility with all major browsers and old browsers too. That’s why it doesn’t use any new-fangled SVG/Canvas APIs. Just a plain-old HTML table, where we manipulate the CSS cell background style. Here’s an interactive Scratchpad, where you can play around with programming against the API. I think it’s neat that Ajax lets us make it this easy to get your hands dirty with a new API – no download, no install, no fuss! Read more… Posted: May 27 2007, 10:40 PM by help.net | with no comments Filed under: Ajax [...]
Bitjuice: JavaScript Bitmap API // May 29, 2007 at 2:26 pm
[...] Michael has packaged Bitjuice, a Prototype based API that lets you draw graphics by creating complex HTML tables that are styled. Yup, not Canvas, not SVG, but HTML tables! [...]
Ajaxian » Bitjuice: JavaScript Bitmap API // May 29, 2007 at 2:46 pm
[...] Michael has packaged Bitjuice, a Javascript API that lets you draw graphics by creating complex HTML tables that are styled. Yup, not Canvas, not SVG, but HTML tables! [...]
Paul Downey :: Lissajous Figures // May 29, 2007 at 5:09 pm
[...] Inspired by Michael’s lovely Bitjuice hack, I couldn’t resist recreating my 80s microcomputing “hello world” program: a table of Lissajous Figures. Like my attempt at visualising the W3C XML Schema Patterns for Databinding test report (very much work in progress!) this takes some time to load. Seems like big HTML tables are of the moment. Next stop – to add XOR to the drawLine and to think about a 80×25 character display so I can implement “Nightmare Park”.. so many ideas, so little time .. [...]
Bitjuice « Chimney // May 31, 2007 at 2:26 am
[...] 31st, 2007 · No Comments Bitjuice is the kind of thing that makes me go “Why didn’t I think of thisbefore?”. Anyway, it is the coolest thing since last week’s coolest thing. It allows you to create web graphics using good old HTML tables. Very innovative and creative idea. [...]
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░░░░░░░░░░░░░░░░░░░░░░░░░████████░░ ░░░░░░░░░░░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████████████████░░░░░░░░░░░░░░ ░░████████████████████░░░░░░░░░░░░░░ ░░████████████████████░░░░░░░░░░░░░░ ░░████████████████████░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████████████████░░░░░░░░░░░░░░ ░░████████████████████░░░░░░░░░░░░░░ ░░████████████████████░░░░░░░░░░░░░░ ░░████████████████████░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████████░░░░░░░░████████████░░ ░░████████████░░░░░░░░████████████░░ ░░████████████░░░░░░░░████████████░░ ░░████████████░░░░░░░░████████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░░░░░░░░░░░░░░░░░░░░░░░░░████████░░ ░░░░░░░░░░░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░