Tutorials About
Html5 Canvas

1 HTML5 Canvas Tutorial
2 HTML5 Canvas Overview
3 HTML5 Canvas: Stroke and Fill
4 HTML5 Canvas: Rectangles
5 HTML5 Canvas: clearRect()
6 HTML5 Canvas: Paths
7 HTML5 Canvas: Gradients
8 HTML5 Canvas: Shadows
9 HTML5 Canvas: Text
10 HTML5 Canvas: Images
11 HTML5 Canvas: Composition
12 HTML5 Canvas: Transformations
13 HTML5 Canvas: State + State Stack
14 HTML5 Canvas: toDataURL()
15 HTML5 Canvas: Pixel Manipulation
16 HTML5 Canvas: Animation

HTML5 Canvas: toDataURL()

It is possible to grab the contents of an HTML5 canvas using the canvas toDataURL() function. Here is a code example of that is done:

var canvas  = document.getElementById("ex1");
var dataUrl = canvas.toDataURL();

The data returned from the toDataURL() function is a string that represents an encoded URL containing the grabbed graphical data. The string can be shown in a textarea element, like this:

var canvas  = document.getElementById("ex1");
var dataUrl = canvas.toDataURL();

document.getElementById("textArea").value = dataUrl;

It is also possible to show the grabbed data in a new window. Here is the code to do that:

var canvas  = document.getElementById("ex1");
var dataUrl = canvas.toDataURL();, "toDataURL() image", "width=600, height=200");

Below is an example of a canvas with some graphics on. Below the canvas are two buttons that enable you to grab the graphics drawn on the canvas and show it in the textarea below the buttons, or show it in a new window.

HTML5 Canvas not supported

Connect with me: Newsletter - Get all my free tips!

This website uses cookies to improve the user experience and gather statistics. Our advertisers use cookies too (3rd party cookies), to provide more relevant ads. Continued use of this website implies that you accept the use of cookies on this website. We do not share our cookies with our advertisers, and our advertisers do not share cookies with us.