Neil's News

Bitmaps in JavaScript

4 August 2008

JavaScript is good for many things, but drawing images has traditionally not been one of them. There have been several attempts: SVG^[?], Canvas^[?], table-based images^[?]. But all three are extremely slow when drawing bitmaps.

I've found a new solution. Build a BMP image file in memory, Base64-encode it, and assign it as a data URI on an image tag. I wrote it as a joke then discovered to my horror that it was ten times faster than the other three options. The result is the JavaScript BMP Library. Check out the race between the different formats in the speed tests.

Note: If you want vector graphics, SVG and Canvas will win hands down. That's what they are designed for.

Update: I've simplified the API, stripped out the useless Canvas support, and created a dedicated speed test (now with SVG).

Randomness:

Co-worker: How do you clone an object in JavaScript?
Me: You have to sacrifice a small animal.
Co-worker: Oh, that's what I thought.

Was watching the SpaceX Falcon 1 launch live yesterday. Twice during the broadcast the video stream was interrupted and was replaced with this crash message (that's a view of SpaceX's desktop). Shortly afterwards the rocket crashed for real.

Next month an art gallery in Tel Aviv will be featuring my Youngme / Nowme photos. I've been told that the expression which made me look cute at one years old makes me look psychotic at thirty-four. Meh.

And finally, my Domino Domino Logic video sailed past 100,000 125,000 views (thanks in part to Boing Boing) and I'm hearing it is now being used in classrooms to teach the fundamentals of logic.

Update: Google Street View has released a group photo of Googlers. Including a bunch of people clutching pencils. Now you have a third data point to analyse against the previous two.

< Previous | Next >