Canvas createLinearGradient

Bonjour;
J'utilise lake.js pour un effet d'eau sur une page.
Le code d'origine crée le canvas en copiant une image display:none, puis applique scale(1,-1) pour le reflet. A ce stade, je souhaiterais appliquer un dégradé vers le blanc sur la deuxième partie issue du scale.
Je bute sur createLinearGradient qui ne marche pas. Pourtant, j'ai déjà utilisé la bête il y a longtemps (http://www.josepaldir.com/banjo/)
Voici le code d'origine de lake.js et celui que je voudrais y insérer :

       img.onload = function() {
            c.save();
            c.canvas.width  = this.width;
            c.canvas.height = this.height*2;
            c.drawImage(this, 0,  0);
            c.scale(1, -1);
            c.drawImage(this, 0,  -this.height*2);
//c.restore();			
// [#red]mon insertion[/#]		
			c.globalCompositeOperation = "destination-out";
			var gra;
			gra = c.createLinearGradient(this.width/2, this.height, this.height, this.height*2); 
			gra.addColorStop(0, "rgba(255, 255, 255, 0)");
			gra.addColorStop(1, "rgba(255, 255, 255, 1)");
			c.fillStyle = gra;
			c.fillRect(0, this.height, this.width, this.height );

Mais ça ne fonctionne pas ...
Quelqu'un pourrait-il m'aider ?
Merci d'avance
Modifié par coopersouper (26 Oct 2018 - 19:29)