Tutoriel Canvas - sommaire

Canvas : masques et compositions

Nous allons aborder dans ce chapitre des fonctionnalités avancées de la librairie canvas : les masques et les compositions.

Masques

Une image découpée par une ellipse ou un trou de serrure c'est joli et c'est réalisable grâce à l'outil masque (ou "clip").
Une masque dissimule une partie de la zone d'affichage : l'extérieur du chemin tout en laissant transparent l'intérieur du chemin.
On réalise un masque en appliquant la méthode clip().
Ci-dessous une image sexy rognée par une ellipse.

Le code correspondant

Le code HTML : <img id ="brune" src ="../images/brune_nue.jpg" style ="display : none;" > <canvas width = '600' height = '400'></canvas>

L'image à insérer dans le canevas fait déjà partie du DOM même si elle est invisible.

Le JS :

function masque()
{
	var canevas = document.querySelector('canvas'); 
	var contexte = canevas.getContext('2d');
	var X =canevas.width; 
	var Y = canevas.height;
	
	contexte.ellipse(X/2,Y/2,X/2,Y/2,0,0,2*Math.PI);
	contexte.clip();
	var image = document.getElementById('brune');
	contexte.drawImage(image,0,0,X,Y) ; 
}
masque(); 

Nouveauté du script : contexte.clip().
La zone extérieure à l'ellipse est opaque alors que l'intérieur de l'ellipse est transparent pour faire apparaitre l'image dans cette zone.

Travaux pratiques

Ci-dessus un document HTML contenant un canevas.

Cette fois le masque est la juxtaposition de deux cercles.

Extrait du code HTML

L'image qui doit être découpée ne fait pas encore partie du DOM. Il faudra donc la charger via le script !

Le script

À vous de compléter !

var canevas = document.querySelector('canvas'); 
var contexte = canevas.getContext('2d');
var X = ...
var Y = ...

var nue = new ...
nue.src ="../images/brune_nue.jpg" ;
nue.onload =...
{
	contexte. ...
	contexte.arc(200,Y/2, 150,0, ...);
	contexte.arc(400,Y/2, 150,0, ...);
	contexte. ...
	contexte.clip();
	contexte.drawImage(...		) ; 
} /// fin fonction anonyme

Comme le chemin est la juxtaposition de deux formes il faut surtout utiliser beginPath() & closePath() dans la définition de celui-ci.

Vous devez être capable de compléter le script.

Compositions

Quand deux formes se superposent partiellement il peut être intéressant de modifier l'apparence par défaut (dernier forme dessinée au dessus de la précédente). Il faut alors employer la propriété globalCompositeOperation.

Propriété globalCompositeOperation

Par défaut la dernière forme dessinée est au dessus de la précédente. Cet ordre d'empilement peut être changé grâce à la propriété globalCompositeOperation.
Dans la terminologie Canvas on emploie les termes "source" et "destination".
La "source" est la forme en cours d'ajout tandis que la "destination" est la forme déjà présente.
La valeur par défaut de globalCompositeOperation est "source-over" donc la "source" est au dessus de la "destination".

Citons les principales valeurs que peut prendre cette propriété :
• source-over : la "source" est au dessus de la "destination" ; valeur par défaut
• destination-over : la "destination" se retrouve au dessus de la "source"
• xor : la zone où les deux formes se recouvrent devient transparente
• source-in : la "source" est visible seulement là où source et destination se recouvrent
• source-out : la "source" est visible uniquemnet là où elle ne recouvre pas destination

Mais il existe d'autres valeurs possibles voir le schéma ci-dessous.

Travaux pratiques

Ci-dessous un document HTML comprenant un canevas.
Deux formes vont apparaitre après que vous ayez renseigné la boite de saisie.

Cliquez sur le bouton de commande puis tapez dans la zone de saisie :
- source-over OU
- destination-over OU
- source-out OU
- source-in OU
- xor

Observez attentivement à chaque fois le rendu dans le canevas.

Le code correspondant

Le code HTML : ... <canvas width = '600' height = '400' style ="width : 60% ; height : auto;"></canvas> <button onclick ="composition()" >Remplir la zone de dessin Canvas</button> ...

Le script :

var valeur = ""; 
function composition()
{
	var canevas = document.querySelector('canvas'); 
	var contexte = canevas.getContext('2d');
	var X =canevas.width; 
	var Y = canevas.height;
	valeur = prompt("saisir source-over OU destination-over OU source-out OU source-in OU xor "); 
	contexte.fillStyle ="red"; 
	contexte.fillRect(X/4, Y/4, X/2,Y/2);
	contexte.globalCompositeOperation = valeur ; 
	contexte.fillStyle ="green";
	contexte.arc(X/4*3,Y/4*3,Y/4,0, Math.PI*2);
	contexte.fill(); 
}

Nouveauté dans le script : contexte.globalCompositeOperation = valeur
Je reconnais que la saisie n'est pas très ergonomique ; une zone de liste serait préférable.