mike chambers | about

Detecting Canvas.toDataURL Support in Browsers

Tuesday, February 1, 2011

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:
<!--more-->

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.

comments powered by Disqus
twitter github flickr behance rss