toDataURL() на Canvas в HTML5

Функция toDataURL() HTML5 Canvas позволяет захватывать содержимое HTML5 canvas. Возвращаемые данные функции toDataURL() представляют собой строку, которая является кодированным URL, содержащим данные графического захвата.

Онлайн пример

Использование функции toDataURL() canvas позволяет захватывать содержимое 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>

Вот пример канваса с некоторыми графическими элементами. Под канвасом находятся два кнопки, которые позволяют вам захватить графические элементы, нарисованные на канвасе, и отобразить их в текстовом поле под кнопками, или в новом окне.