Detecting Canvas.toDataURL Support in Browsers

I am wrapping up a code example that uses the Canvas.toDataURL API to save canvas data to an image. I am almost done, and was doing a final round of browser testing when I noticed that my example wasnt working on my Android based Google Nexus One Device (2.2.2). After some debugging, and then Googling, I discovered that the Canvas.toDataURL API is not implemented on Android (you can view the bug report here).

Well, after some cursing, I put together a simple method for detecting whether the API is supported on any particular device. I wanted to share it in case anyone else might run into a need for it. So, here it is:

function supportsToDataURL() {
    var c = document.createElement("canvas");
    var data = c.toDataURL("image/png");
    return data.indexOf("data:image/png") == 0;
}

The code assumes that you are already checking for Canvas support.

Here is the script in action:

and the code:

function supports_canvas() {
    return !!document.createElement("canvas").getContext;
}

function supportsToDataURL() {
    if (!supports_canvas()) {
        return false;
    }

    var c = document.createElement("canvas");
    var data = c.toDataURL("image/png");
    return data.indexOf("data:image/png") == 0;
}

var results = "";

if (supportsToDataURL()) {
    results = "You browser is cool and supports Canvas.toDataURL();";
} else {
    results = "You browser is lame and does NOT support Canvas.toDataURL();";
}
document.write(results);

If you have any fixes or suggestions for the detection, post them in the comments.