HTML5 Canvas: drawImage не работает на Firefox

Question

Этот код работает в chrome, opera yandex и т. Д. Браузерах, но не работает в firefox.

"el" в коде - мое изображение (хранится следующим образом <img src="background.png").

fadeIn: function(el){ 
     var self = this; 

     var alpha = 0; 
     var interval = window.setInterval(function(){ 
      if (alpha < 1){ 
       self.ctx.clearRect(0, 0, Lottery.Canvas.width, Lottery.Canvas.height); 
       alpha += 0.01; 
       self.ctx.globalAlpha = alpha; 
       self.ctx.drawImage(el, 0, 0); 
      } else { 
       clearInterval(interval); 
      } 
     }); 
    } 

Answer 1

две проблем, которые имеют значение для FireFox,

1. setInterval нужно значение интервала я установить его в 1мс
2. переменного альфа не определен. Я определил его на 0,01 (возможно, вы захотите создать локальную переменную, у меня она будет в виде глобулы)

Протестировано на FF. https://jsfiddle.net/rg1uyw1p/5/

var editor = { 
 
ctx : "", 
 
fadeIn: function (el){ 
 
     var self = this; 
 
     var interval = window.setInterval(function(){ 
 
      if (alpha < 1){ 
 
       self.ctx.clearRect(0, 0, Lottery.Canvas.width, Lottery.Canvas.height); 
 
       alpha += 0.1; 
 
       self.ctx.globalAlpha = alpha; 
 
       self.ctx.drawImage(el, 0, 0); 
 
       console.log("ALPHA: " + alpha); 
 
      } else { 
 
      \t \t console.log("CLEAR: " + alpha); 
 
       clearInterval(interval); 
 
      } 
 
     },1); 
 
    }, 
 
}; 
 
Lottery = {}; 
 
alpha = 0.01; 
 
Lottery.Canvas = document.getElementById("canvas"); 
 
editor.ctx = Lottery.Canvas.getContext("2d"); 
 
editor.fadeIn(document.getElementById("img"));

<img id="img" src="http://cdn.sstatic.net/stackoverflow/company/img/logos/so/so-logo-med.png?v=6f86a5fa447f"> 
 
<canvas id="canvas" width="500" height="500"></canvas>