HTML5 Canvas context globalAlpha not working on image [iOS]

Question

I'm updating the "this.opacity" value to fade an svg logo. The code bellow is working except on iOS(8).

    var size = (this.canvas.width * 0.2) * 0.4;

    this.context.save();
    this.context.globalAlpha = this.opacity;
    this.context.drawImage(this.svg, this.canvas.width * 0.04, this.canvas.width * 0.027, size, size);
    this.context.restore();

Answer 1

Animating the alpha of SVG images is not supported on iOS. But i found a solution. If you create a fullscreen canvas using the following code to scale it:

var ratio = window.devicePixelRatio || 1,
    width = $(window).width(),
    height = $(window).height();

this.canvas.width = width * ratio;
this.canvas.height = height * ratio;
this.canvas.style.width = width + "px";
this.canvas.style.height = height + "px";

this.update();

You will be able to use double sized images to give retina support, that way you don't have to use SVG elements in your canvas (which is IMHO terrible for your memory as well). And the good thing is that images will accept setting the globalAlpha of your context.

Hope the reader is informed enough :-).