HTML5 Canvas toDataURL()

HTML5 The canvas toDataURL() function can capture HTML5 The content of canvas, the data returned from the toDataURL() function is a string representing an encoded URL that contains the captured graphic data.

Online Examples

The canvas toDataURL() function can capture HTML5 Content of canvas. Here is a complete code example:

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

The data returned from the toDataURL() function is a string representing an encoded URL that contains the captured graphic data. The string can be displayed in a textarea element, as shown below:

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

You can also display the data obtained in a new window. This is the code to perform this operation:

<canvas id="ex1" width="500" height="100" style="border:　1px solid #cccccc;">
　　　　HTML5　Canvas not supported
</canvas><script>
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.font = "36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML5　Canvas Text",　50,　50);
context.font = "normal　36px Arial";
context.strokeStyle = "#000000";
context.strokeText("HTML5　Canvas Text",　50,　90);
</script>

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