Graphics Reference
In-Depth Information
How it works...
In HTML5, it is possible to describe a file or any other resource using a URL starting
with data. So, instead of fetching resources in multiple HTTP requests, these re-
sources could be included directly in the HTML document. The canvas element al-
lows you to copy its contents as a URL that complies with this scheme. In this recipe,
we use this data URL to create a new
img
element, which can be saved like a nor-
mal image.
If you want to dive into the details of the data URL scheme, you can look at the
RFC (Request For Comments) that describes this scheme at
http://tools.ietf.org/
There's more
In the most recent version of Chrome and Firefox, you can also save the output of an
HTML canvas element by right-clicking and selecting
Save Image As
. Besides using
the standard browser functionality, it is also possible to directly start the download of
the image. If you use the following piece of code instead of creating and adding a
new image, the browser will automatically download the canvas as an image:
var link = document.createElement("a");
link.download = 'capture.png';
link.href = imgData;
link.click();
Finally, If you've got an animation that you want to save as a movie, you can do that
as well. You can find instructions on how to do this at:
http://www.smartjava.org/con-
