Mike Chambers

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.