Почему первый сбой нагрузки, но последующие нагрузки работают?

Question

Вопрос лучше всего демонстрируется с помощью jsFiddle. Here is is.

Итак, в соответствии с этим кодом:

var canvas = document.getElementById('canvas'); 
canvas.width = 200; 
canvas.height = 150; 
var context = canvas.getContext('2d'); 
context.rect(20,20,50,50); 
context.stroke(); 
var image = new Image(); 
image.src = canvas.toDataURL("image/png"); 
context.clearRect(0, 0, canvas.width, canvas.height); 
context.drawImage(image, 0, 0); 

вы должны увидеть прямоугольник нарисованный на холсте каждый раз при загрузке страницы. Однако по какой-то причине загрузка первой страницы всегда ничего не показывает, «пустой» ...

Этот момент можно проверить, открыв ссылку jsFiddle в отдельных вкладках Chrome «Incognito». Вы никогда не увидите загрузку прямоугольника в первый раз. Однако освежение появится.

И чтобы доказать, что вы действительно должны видеть прямоугольник на начальной загрузке, попробуйте обновить jsFiddle к этому:

var canvas = document.getElementById('canvas'); 
canvas.width = 200; 
canvas.height = 150; 
var context = canvas.getContext('2d'); 
context.rect(20,20,50,50); 
context.stroke(); 
//var image = new Image(); 
//image.src = canvas.toDataURL("image/png"); 
//context.clearRect(0, 0, canvas.width, canvas.height); 
//context.drawImage(image, 0, 0); 

и вы увидите прямоугольник на каждую первую нагрузку.

Почему первый груз не показывает ничего?

Answer 1

Вы должны ждать изображения для загрузки, прежде чем Дрей его, и он работает на перезагрузку, потому что он получает кэшируются

image.onload = function(){ 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.drawImage(image, 0, 0); 
} 

http://jsfiddle.net/hJ9WQ/1/