Experiments with HTML5

I’ve put together a little HTML5 experiment in a web page that uses the canvas and local storage. If you are using Chrome 11 or Safari  5, try it here. Add a shape, drag the shapes around, close your browser, open it again, and return to the page. You should see the shapes exactly where you left them.

In the month since  Online Poker’s Black Friday, Poker Copilot sales have plummeted. Until there is some clarity in the online poker situation, I’ve switched into “maintenance” mood for Poker Copilot. That means I’m doing just enough work to fix significant issues and to help customers and potential customers solve problems. I’ve halted further development of new features.

This has given me some time to look into HTML5. I’ve seen some interesting HTML5 demos but I’ve always assumed they involved a mass of unreadable, unmaintainable JavaScript. Then last week I saw the Chrome-only browser-based version of Angry Birds and decided it was time to see exactly what HTML5 can do.

HTML5 leaves me flabbergasted. Amazed. Astonished.

You have a full drawing canvas with well-thought out graphics primitives. You can draw lines and rectangles, arbitrary shapes, Bézier curves, all with a range of strokes, fills, and shadows.

HTML5 also has “local storage”, meaning a web page can store stuff on your computer, and load it again when you return to the same web page another day. To save a object graph to local storage, you can do this:

localStorage["myData"] = JSON.stringify(myData);

To restore it, you do the following:

var item = localStorage["myData"];
if (!item) {
    myData = ... make new stuff ...
} else {
    myData = JSON.parse(item);
}