HTML5 Canvas
HTML5 Canvas Introduction
HTML5 Canvas Overview
HTML5 Canvas Stroke and Fill
HTML5 Canvas Rectangles
HTML5 Canvas clearRect()
HTML5 Canvas Paths
HTML5 Canvas Gradients
HTML5 Canvas Shadows
HTML5 Canvas Text
HTML5 Canvas Images
HTML5 Canvas Composition
HTML5 Canvas Transformation
HTML5 Canvas State + State Stack
HTML5 Canvas toDataUrl()
HTML5 Canvas Pixel Manipulation
HTML5 Canvas Animation
 


HTML5 Canvas: toDataURL()

Connect with me:  
  Jenkov.com - News

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();

window.open(dataUrl, "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




NextNext : HTML5 Canvas Pixel Manipulation

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