HTML5 toDataURL() do canvas

HTML5 A função toDataURL() do canvas pode capturar o conteúdo HTML5 O conteúdo do canvas, os dados retornados pela função toDataURL() são uma string que representa a URL codificada contendo os dados gráficos capturados.

Exemplo online

A função toDataURL() do canvas pode capturar o conteúdo HTML5 conteúdo do canvas. Este é um exemplo de código completo:

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

Os dados retornados pela função toDataURL() são uma string que representa a URL codificada contendo os dados gráficos capturados. A string pode ser exibida no elemento textarea, conforme mostrado a seguir:

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

Também é possível exibir os dados obtidos em uma nova janela. Este é o código para executar essa operação:

<canvas id="ex1" largura="500" altura="100" estilo="border:　1px sólido #cccccc;">
　　　　HTML5　Canvas não suportado
</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>

A seguir está um exemplo de canvas com alguns gráficos. Abaixo do canvas há dois botões que permitem que você puxe os gráficos desenhados no canvas e os mostre na área de texto abaixo dos botões ou em uma nova janela.