Announcing Bitjuice: Ajax Bitmap API

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.

6 thoughts on Announcing Bitjuice: Ajax Bitmap API

  1. Pingback: Bitjuice: Ajax bitmap API - help.net

  2. Pingback: Bitjuice: JavaScript Bitmap API

  3. Pingback: Ajaxian » Bitjuice: JavaScript Bitmap API

  4. Pingback: Paul Downey :: Lissajous Figures

  5. Pingback: Bitjuice « Chimney

  6. ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░░░░░░░░░░░░░░░░░░░░░░░░░████████░░ ░░░░░░░░░░░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████████████████░░░░░░░░░░░░░░ ░░████████████████████░░░░░░░░░░░░░░ ░░████████████████████░░░░░░░░░░░░░░ ░░████████████████████░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████████████████░░░░░░░░░░░░░░ ░░████████████████████░░░░░░░░░░░░░░ ░░████████████████████░░░░░░░░░░░░░░ ░░████████████████████░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░████████████░░░░░░░░████████████░░ ░░████████████░░░░░░░░████████████░░ ░░████████████░░░░░░░░████████████░░ ░░████████████░░░░░░░░████████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░░░░░░░░░░░░░░░░░░░░░░░░░████████░░ ░░░░░░░░░░░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████░░░░░░░░░░░░░░░░████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░████████████████████████████████░░ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

Leave a Reply