Canvas Pocket Reference

Name

Canvas.toDataURL() — returns canvas image as a data: URL

Synopsis

String toDataURL()
String toDataURL(String type, parameters...)

Arguments

type

A string specifying the MIME type of the image format to use. If this argument is omitted, the default value is “image/png”, and the PNG image format is the only one that implementations are required to support.

parameters...

For image types other than PNG, additional arguments may be specified that provide encoding details. If type is “image/jpeg”, for example, then the second argument should be a number between 0 and 1 specifying the image quality level. No other parameter arguments are standardized at the time of this writing.

Returns

A string, containing a PNG representation of the canvas bitmap, encoded as a data: URL

Description

toDataURL() returns the contents of the canvas bitmap in a URL form that can easily be used with an <img> tag or transmitted across the network.

To prevent cross-origin information leaks, toDataURL() does not work on <canvas> tags that are not “origin-clean.” A canvas is not origin-clean if it has ever had an image drawn in it (directly by drawImage() or indirectly through a CanvasPattern) that has a different origin than the document that contains the canvas.

Example

// Copy the content of a canvas to an image element // and append that image to the document var canvas = document.getElementById("my_canvas"); var image = document.createElement("img"); image.src = canvas.toDataURL(); document.body.appendChild(image); ...