HTML5 Canvas toDataURL()

HTML5 Canvas toDataURL()機能でHTML5 canvasの内容をキャプチャすることができます。toDataURL()関数から返されるデータは、キャプチャしたグラフィックデータを含むエンコードされたURLの文字列です。

オンラインサンプル

canvasのtoDataURL()機能を使用してHTML5 canvasの内容です。以下は完了したコードの例です：

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

toDataURL()関数から返されるデータは、キャプチャしたグラフィックデータを含むエンコードされたURLの文字列です。この文字列は以下のようにtextarea要素に表示できます：

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

新しいウィンドウで取得したデータを表示することもできます。この操作を実行するコードは以下の通りです：

<canvas id="ex1" width="500" height="100" style="border:　1px solid #cccccc;">
　　　　HTML5　Canvas はサポートされていません
</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>

以下は、キャンバスにいくつかのグラフィックを持つキャンバスの例です。キャンバスの下には、キャンバスに描かれた図形をキャンバスの下のテキストエリアに表示するか、新しいウィンドウで表示するかを選択できる二つのボタンがあります。