Проблема холст изображения

Question

У меня проблемы с JavaScript и Canvas, особенно в Firefox.Я пытаюсь создать просмотрщик изображений холста, который будет работать, когда холст включен в браузере вместо стандартного тега img.Javascript изменяет изображение из массива путей src при нажатии стрелки.По какой-то причине Firefox всегда один img из синхронизации.Когда я тестирую его в chrome, imgs синхронизируются, но первый не отображается.

здесь - объект изображения

var image = new Image();
image.src = myImage.src[0];

- здесь моя первоначальная инициализация canvas

if(canvas()){ //canvas stuff
var myc = document.createElement('canvas');
myc.id='mycanvasx';
mycanvas = document.getElementById('mycanvasx');
myc.width = image.width;
myc.height = image.height;
//viewer.replaceChild(myc, scroller);
viewer.appendChild(myc);
var context = myc.getContext("2d");
dw = image.width;
dh = image.height;

context.clearRect(0, 0, myc.width, myc.height);
context.drawImage(image, 0, 0, dw, dh); 

}

и когда нажата стрелка, функция, подобная этой, называется

function update(){ 
if(canvas()){
context.clearRect(0,0,myc.width, myc.height) //maybe bloat
myc.width = image.width;
myc.height = image.height;
dw = image.width;
dh = image.height;

context.drawImage(image, 0, 0, dw, dh); 

} 
} 

function left(){ //these move the image through the source array
if(myImage.num > 0){myImage.num--;}else{
myImage.num = (myImage.src.length-1)}
image.src = myImage.src[myImage.num];
scroller.src = image.src;
update();

x=0;
}

Я знаю, что, должно быть, здесь упущено что-то простое.Я использую Firefox 4.0.1 и Chrome 11

Answer 1

Вы устанавливаете источник изображения, а затем сразу же рисуете его на холсте. Но изображения загружаются асинхронно. Итак, вы рисуете его до загрузки нового src поскольку вы продолжаете использовать одно и то же изображение, оно все еще показывает предыдущее изображение.

Вы хотите запустить update() с прослушивателя onload на image.