CODEWITHSUNDEEP
javascriptfirefoxhtmlcanvas
joel
joel

Reputation: 109

Canvas Image trouble

I am having issues with JavaScript and Canvas particularly in Firefox. I am trying to create an canvas image viewer that will run when canvas is enabled in a browser in place of standard img tag. Javascript changes the image from an array of src paths when an arrow is clicked. For some reason Firefox is always one img out of sync. When I test it in chrome the imgs are in sync but the first one is not displayed.

here is the image object

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

here is my initial canvas intialization

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); 

}

and when the arrow is pressed a function like this is called 

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;
}

I know I must be missing something simple here. I'm using firefox 4.0.1 and chrome 11

Upvotes: 3

Views: 471

Answers (1)

Boris Zbarsky
Boris Zbarsky

Reputation: 35074

You're setting the src of the image and then immediately painting it into the canvas. But image loads are async. So you're painting it before the new src you set has loaded; since you keep reusing the same image it's still showing the previous image at that point.

You want to run update() off an onload listener on image.

Upvotes: 3

Related Questions