Capture HTML Canvas as gif/jpg/png/pdf?

Oops. Original answer was specific to a similar question. This has been revised:

var canvas = document.getElementById("mycanvas");var img    = canvas.toDataURL("image/png");

with the value in IMG you can write it out as a new Image like so:

document.write('<img src="'+img+'"/>');

HTML5 provides Canvas.toDataURL(mimetype) which is implemented in Opera, Firefox, and Safari 4 beta. There are a number of security restrictions, however (mostly to do with drawing content from another origin onto the canvas).

So you don't need an additional library.

e.g.

 <canvas id=canvas width=200 height=200></canvas> <script>      window.onload = function() {          var canvas = document.getElementById("canvas");          var context = canvas.getContext("2d");          context.fillStyle = "green";          context.fillRect(50, 50, 100, 100);          // no argument defaults to image/png; image/jpeg, etc also work on some          // implementations -- image/png is the only one that must be supported per spec.          window.location = canvas.toDataURL("image/png");      } </script>

Theoretically this should create and then navigate to an image with a green square in the middle of it, but I haven't tested.

I thought I'd extend the scope of this question a bit, with some useful tidbits on the matter.

In order to get the canvas as an image, you should do the following:

var canvas = document.getElementById("mycanvas");var image = canvas.toDataURL("image/png");

You can use this to write the image to the page:

document.write('<img src="'+image+'"/>');

Where "image/png" is a mime type (png is the only one that must be supported). If you would like an array of the supported types you can do something along the lines of this:

var imageMimes = ['image/png', 'image/bmp', 'image/gif', 'image/jpeg', 'image/tiff']; //Extend as necessary var acceptedMimes = new Array();for(i = 0; i < imageMimes.length; i++) {    if(canvas.toDataURL(imageMimes[i]).search(imageMimes[i])>=0) {        acceptedMimes[acceptedMimes.length] = imageMimes[i];    }}

You only need to run this once per page - it should never change through a page's lifecycle.

If you wish to make the user download the file as it is saved you can do the following:

var canvas = document.getElementById("mycanvas");var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); //Convert image to 'octet-stream' (Just a download, really)window.location.href = image;

If you're using that with different mime types, be sure to change both instances of image/png, but not the image/octet-stream.It is also worth mentioning that if you use any cross-domain resources in rendering your canvas, you will encounter a security error when you try to use the toDataUrl method.