Ошибка в затенении изображений при использовании <canvas>

Question

Я пытаюсь сделать изображение плавнее, используя метод canvas drawImage ().Я использую jQuery для fadeIn () и fadeOut () холста.

Вот код:

$("#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 - идентификатор холста.Проблема в том, что если img1 уже был просмотрен, fadeOut происходит после того, как изображение изменилось, т.е. сначала изображение меняется, а затем холст исчезает и возвращается. Я что-то упустил?Спасибо

Answer 1

Кажется, что работает на меня .Единственной проблемой, с которой я столкнулся, было то, что мне пришлось использовать getElementById вместо $() в вызове заказа getContext и установить переменную img.

$("#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;
});