Signin
Canvas Element Issues

Implementing identicon using canvas uncovered some issues relevant to developers. I'll list them here for discussion:

No Data

Storing data used to render into a canvas directly in canvas is a common use case IMHO. With identicon, I am using the 'title' attribute on canvas element to store the identicon code but it would be nice to have an attribute for this purpose ('data'?).

No Script

Since canvas can't be drawn into unless javascript is enabled, canvas support should be disabled if javascript is disabled. As it is now, fallback doesn't kick in and canvas area appears blank.

Spaced Out

I worked around the No Script issue by wrapping a fallback image inside a 'noscript' element but, since the blank canvas takes up space, both will show next to each other when script is turned off, screwing up layout. While CSS tricks can be used to overlap them, I think unnecessary complications should be avoided if possible.

Active Fallback Unnecessary Get

Firefox fetches resources referenced from canvas fallback content even when canvas is working. My expectation is that it shouldn't do this because, when large number of canvases are used in a page and each had fallback content, page would load very slowly.

Comments
Andrew Sidwell   at 2007/01/25 01:42:03 PM
To get around "Spaced Out": "display: none;" the canvases by default, and "display: block" them on a pageload script.
Aha. Didn't think of that workaround. Thx. :-)
The trick works just fine on Firefox but Safari gets rather confused, refusing to display the canvas. Hmm. I want to support Safari but this is getting pretty annoying.
Asbjørn Ulsberg   at 2007/01/26 05:47:39 AM
If the canvas doesn't work without scripting enabled, why display it without scripting enabled? Just dynamically create it with script and do a replaceNode() on the fallback PNG in the document. The canvas data can perhaps be stored in a 'data:' URI?
Because of 'Active Fallback' which should have been 'Unnecessary Get'. In the case of the original identicon post, 400+ HTTP GET requests will get queued. Yikes.

Anyway, it should work on all browsers now with only Safari showing slightly mispositioned identicon when javascript is disabled.
Your Identicon:
Name: * required
Email:
Website URL:
 
Comment:
HTML not supported