Error in crossfading images using <canvas>

Question

I'm trying to crossfade images using the canvas drawImage() method. I'm using jQuery to fadeIn() and fadeOut() the canvas.

Here's the code:

$("#c").fadeOut(800,function() {
            //aw and ah are calculated here
        ctx = canvas.getContext('2d');      
        ctx.drawImage(img1, 0, 0, aw, ah);              
        $("#c").fadeIn(400);
});

c is the id of the canvas. The problem is - if img1 has been viewed already, the fadeOut happens after the image has changed, i.e. first the image changes, and then the canvas fades out and back in. Am I missing something? Thanks

Answer 1

Seems to be working for me. The only issue I had was that I had to use getElementById rather than $() in order call getContext and to set the img variable.

$("#c").fadeOut(800,function() {
    var canvas = document.getElementById("c");
    var aw = 100;
    var ah = 100;
    var img = document.getElementById("img" + (currentImage + 2));
    ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, aw, ah);
    $("#c").fadeIn(400);
    currentImage = currentImage * -1;
});