À la fin de l’article précédent j’avais utilisé une image comme motif. Comme on ne pouvait pas le deviner l’image utilisée était la suivante.
Les canvas ne permettent pas de placement précis des motifs. Mais il existe un moyen: le compositage. Cette méthode fonctionne un peu comme les calques et masques des logiciels de type Photoshop. Cet étape supplémentaire permet le positionnement précis de l’image utilisée comme fond.
Le compositage s’effectue via la propriété globalCompositeOperation, qui s’utilise de la manière suivante:
ctx.globalCompositeOperation='source-atop';
La propriété source-atop utilisée ci-dessus signifie qu’à la fin ne reste visible que la partie de la source (éléments ajoutés ultérieurement) comprise dans la destination (éléments déjà en place). Pour la liste de toutes les valeurs possibles, rendez-vous sur w3schools.
Avec le réglage ci-dessus, pour un texte avec une image en fond, il faut d’abord placer le texte, puis placer l’image, à l’aide de la méthode drawImage:
//Avec: image à utiliser, coordonnées de l'image, dimensions de l'image
ctx.drawImage(img,0,-85,500,375);
En adaptant le code existant, cela donne :
setTimeout(function(){
var img = new Image();
img.onload = function(){
var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
ctx.font = '85px Knewave';
ctx.textAlign = 'center';
ctx.shadowColor = '#000';
ctx.shadowBlur = 20;
ctx.fillText('Summer',250,100);
ctx.fillText('is magic',250,180);
ctx.globalCompositeOperation='source-atop';
ctx.drawImage(img,0,-85,500,375);
};
img.src = 'https://geekcommunicant.com/blog/wp-content/uploads/summer-girls-13.jpg';
},1000);
Nous obtenons alors :
Pas très joli… Mais si vous regardez le code utilisé, vous en verrez la cause: le texte, placé avant l’image, a une ombre, et c’est ce qui créé les « bavures ».
Pour placer l’ombre sur le texte avec l’image, il faut utiliser un canvas intermédiaire: on composite le texte sans ombre avec l’image sur un canvas intermédiare, et on dessine ce canvas avec une ombre sur le canvas final. Le canvas intermédiaire est masqué via le CSS et la propriété display:none;.
Le contenu de notre body devient alors :
<canvas id="canvas" width="500" height="250"></canvas>
<canvas id="temp" width="500" height="250"></canvas> //le canvas temporaire, masqué via CSS
<script type="text/javascript">
window.onload = function() {
setTimeout(function(){
var img = new Image();
img.onload = function(){
//ici, on composite l'image avec le texte
var c = document.getElementById("temp");
var ctx = c.getContext("2d");
ctx.font = "85px Knewave";
ctx.textAlign = "center";
ctx.fillText("Summer",250,100);
ctx.fillText("is magic",250,180);
ctx.globalCompositeOperation="source-atop";
ctx.drawImage(img,0,-85,500,375);
//ici, on place l'ombre sous le texte imagé
var c1 = document.getElementById("canvas");
var ctx1 = c1.getContext("2d");
ctx1.shadowColor = "#000";
ctx1.shadowBlur = 20;
ctx1.drawImage(temp,0,0);
};
img.src = "https://geekcommunicant.com/blog/wp-content/uploads/summer-girls-13.jpg";
},1000);
};
</script>
Résultat :
Et voilà, j’espère que cette série d’articles sur l’utilisation des canvas vous aura éclairé.