Проблема с использованием Canvas dataURL

Question

Я пытаюсь сделать работу кнопкой, которая откроет новое окно с содержимым моего холста в нем (рендеринг изображения холста).

Вот мой JS код:

var canvas = document.getElementById("thecanvas"); 
var dataUrl = canvas.toDataURL(); 
var context = canvas.getContext("2d"); 
context.fillStyle = "rgba(0, 0, 255, .5)"; 
context.fillRect(25, 25, 125, 125); 
function clickme() { 
window.open(dataUrl, "toDataURL() image", "width=200, height=500"); 
}​ 

HTML код:

<input type="button" onclick="clickme()" value="OPEN"/> 

<canvas id="thecanvas" height="200" width="500" style="border:1px solid black"> 

Но когда я нажимаю на "OPEN" кнопку, ничего не происходит ... но я действительно не понимаю, почему , Я просмотрел много сайтов для учебных пособий. Я даже скопировал и вставил некоторые коды, но до сих пор ничего не происходит. Я делаю что-то неправильно? Спасибо!

Answer 1

Прежде всего, порядок выполнения ваших заявлений имеет значение. Вам нужно позвонить toDataURL после того, как вы нарисуете на холсте, или dataURL, сгенерированный без содержания этого содержимого.

Я не уверен, что ваши теги сценария похожи, но вот рабочий пример, который делает событие в несколько более надежный способ: http://jsfiddle.net/b7G6J/

HTML:

<input id="thebutton" type="button" value="OPEN"/> 

<canvas id="thecanvas" height="200" width="500" style="border:1px solid black"> 

JS:

var canvas = document.getElementById("thecanvas"); 
var context = canvas.getContext("2d"); 

// First drawing commands 
context.fillStyle = "rgba(0, 0, 255, .5)"; 
context.fillRect(25, 25, 125, 125); 
// Then toDataURL 
var dataUrl = canvas.toDataURL(); 

var button = document.getElementById("thebutton"); 
button.onclick =function() { 
    window.open(dataUrl, "toDataURL() image", "width=200, height=500"); 
}