hIdaho Design TM Help Comments
Drawing
© Copyright 1996, 2019 Bill Dortch.

DoodlePad Lives!

This page emulates my original DoodlePad page, the first pure JavaScript drawing app, written in February, 1996, and available here. My thanks to the person(s) in the Computer Science department at Sacramento State University who preserved it all these years here, as over the years I had lost track of my original copy.

The original DoodlePad no longer works, for a variety of reasons, chief among them being that the XBM image format it relied upon is not supported by modern browsers. XBM was easy to work with in JavaScript because it's a textual format — in fact, it's valid C code. That's part of what led to its removal from browsers, but I expect lack of relevance also played a role. The other technology DoodlePad-1996 relied upon was the <frameset>. That element is deprecated as of HTML 5, but still works in most browsers, sort of. But some things you could do in 1996 are not supported now (for security reasons, I expect), also breaking DoodlePad.

So, this version, DoodlePad-2019, uses tables for layout, and canvas elements to render images. As much as possible, I stuck with the original code, right up to and including generating the XBM string. A new method then maps the pixels to an ImageData object and sets that in the canvas element. I also scaled up the images so the page appears somewhat as it did in 1996, when the typical PC screen resolution was 800x600, and even replicated the clunky frameset chrome.

I go into more detail about both the original and the new versions at the new DoodlePad home, at https://billdortch.site/doodlepad.

Usage note: You can't drag the mouse to draw, just click on the next point as instructed by the hint. There were no mouse events exposed as such in February 1996, and even getting the click coordinates required some trickery, as detailed at the link above. In desktop/laptop versions of Firefox, Brave and Chrome (but not Edge), you can click the right mouse button to save your drawing in PNG format should you wish.

Bill Dortch
June 9, 2019