Problem with canvas

I have problems with JavaScript and Canvas, especially in Firefox. I am trying to create a canvas image viewer that will work when canvas is enabled in the browser instead of the standard img tag. Javascript modifies an image from an array of src paths when an arrow is clicked. For some reason, Firefox is always one of them out of sync. When I test it in chrome, the imgs are synchronized, 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 implementation

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 you click the arrow, this function 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 that I must be missing something here. I am using firefox 4.0.1 and chrome 11