CODEWITHSUNDEEP
javascriptcsshtmlcanvas
practicemakesperfect
practicemakesperfect

Reputation: 414

Canvas radial gradient with rgba doesn't work on Safari & IE

Here is my code for a moving radial gradient on canvas. It works on Chrome and Firefox, but not on Firefox. I also want a fallback option for IE - actually can't test it easily on a Mac, but I'm assuming it's not if it's an old IE. For IE, seeing through the image without the alpha channel gradient will do. Any idea?

  var cirRadius = 300;

  var posX = 100; 
  var posY = 100;
  var RGB = [11,11,11] ; 
  var alphas = [0,0,0.1,0.5,1];

  var update = function(){
      if(ctx){  
          if(image.complete){ 
              ctx.drawImage(image,0,0,canvas.width,canvas.height)
          }else{ 
              ctx.clearRect(0,0,canvas.width,canvas.height);
          }
          var grad = ctx.createRadialGradient(posX,posY,0,posX,posY,cirRadius);
          var len = alphas.length-1;
          alphas.forEach((a,i) => {
               grad.addColorStop(i/len,`rgba(${RGB[0]},${RGB[1]},${RGB[2]},${a})`);
          });
          ctx.fillStyle = grad;
          ctx.fillRect(0,0,canvas.width,canvas.height);
      }
      requestAnimationFrame(update);
  }

Upvotes: 1

Views: 492

Answers (1)

practicemakesperfect
practicemakesperfect

Reputation: 414

It turns out that Safari doesn't recognize the shortcut in the forEach loop, so I just have to change this: 

alphas.forEach((a,i) => {
    grad.addColorStop(i/len,`rgba(${RGB[0]},${RGB[1]},${RGB[2]},${a})`);
});

to this: 

alphas.forEach(function (a,i) {
    grad.addColorStop(i/len,`rgba( ${RGB[0]}, ${RGB[1]}, ${RGB[2]}, ${a})`);
});

It works with the latest IE, but I guess I can do a different style for hte older versions of the IE.

Upvotes: 1

Related Questions