Effet miroir sur une image avec le canvas HTML5

On a souvent vu comment le faire dans Photoshop et par CSS, la réflexion d'une image est un effet très populaire allant même jusqu'à l'affichage CoverFlow d'iTunes. Peut-être même un peu surutilisé mais bon, je ne suis pas ici pour donner mon avis car je ne suis qu'un programmeur. Ce qui m'intéresse, c'est de savoir comment le faire par le canvas HTML5.

Le concept est simple : on part d'une image, on la duplique, on applique une rotation de 180 degrés à sa copie et on la positionne au pied de l'image d'origine. Pour que l'effet soit réussi, un voile partiellement transparent et dégradé vient créer un effet miroir.

Comment reproduire cet effet en appliquant les concepts du HTML5 ? En premier lieu, il faudra choisir une image. J'ai sélectionné pour vous la pochette de la trame sonore du film Back to the Future II (oui, vous pouvez aussi prendre celle de Tobby le joueur étoile, c'est selon vos goûts).

L'image mesure 200 pixels de côté et on commence par l'incorporer dans le canvas. Un point important à noter, c'est qu'on pourra la dessiner que lorsque son contenu sera chargé. C'est pourquoi on la dessinera uniquement lorsque jQuery nous indiquera le bon moment.

var canvas = $('#myCanvas');
var context = canvas.get(0).getContext('2d');

var img = new Image();
img.src = 'images/album-os-bttf.jpg';
$(img).load(
   function(){
       context.drawImage(img, 0, 0);

       // le reste du code sera inséré ici
   }
}

On déplace le contexte immédiatement sous l'image en calculant deux fois la hauteur de celle-ci (à cause de la copie). Et on fait pivoter le contexte verticalement à l'aide de la fonction scale (à noter que pour un pivot horizontal, ce sera scale(-1, 1)).

context.translate(0, 400);
context.scale(1, -1);

Avant de dessiner l'image qui servira au reflet, je modifie la propriété globalAlpha qui prend une valeur entre 0 (transparent) et 1 (opaque). La seconde image sera donc semi-transparente.

context.globalAlpha = 0.5;
context.drawImage(img, 0, 0);

Je réinitialise l'opacité complète.

context.globalAlpha = 1;

La dernière étape servira à produire le dégradé. En HTML5, il en existe un linéaire et radial (circulaire). J'utiliserai le premier qui appliquera par dessus le reflet un dégradé allant de transparent au haut jusqu'à une opacité de couleur blanche qui prendra effet au milieu de l'image jusqu'au bas (mon canvas est de fond blanc). Et on appelle fillRect() pour couvrir la totalité de l'image en reflet.

var gradient = context.createLinearGradient(0, 0, 0, 200);
gradient.addColorStop(1, 'transparent');
gradient.addColorStop(0.5, 'white');
context.fillStyle = gradient;
context.fillRect(0, 0, 200, 200);

C'est aussi simple que ça. Le code final pour ceux qui voudraient le copier/coller :

var canvas = $('#myCanvas');

if(canvas && canvas.get(0).getContext){

   var context = canvas.get(0).getContext('2d');

   var img = new Image();
   img.src = 'images/album-os-bttf.jpg';
   $(img).load(
 function(){
     context.drawImage(img, 0, 0);

     context.translate(0, 400);
     context.scale(1, -1);

     context.globalAlpha = 0.5;
     context.drawImage(img, 0, 0);
     context.globalAlpha = 1;

     var gradient = context.createLinearGradient(0, 0, 0, 200);
     gradient.addColorStop(1, 'transparent');
     gradient.addColorStop(0.5, 'white');
     context.fillStyle = gradient;
     context.fillRect(0, 0, 200, 200);
 }
   );
}