En tots els nostres exemples anteriors, les formes sempre s'han dibuixat una damunt de l'altra. Això és més que adequat per a la majoria de les situacions, però limita l'ordre en què es construeixen formes compostes. No obstant això, podem canviar aquest comportament establint la propietat globalCompositeOperation. A més, la propietat clip permet ocultar parts de formes no desitjades.
globalCompositeOperationNo només podem dibuixar noves formes darrere de les formes existents, sinó que també, podem utilitzar-ho per emmascarar certes àrees, esborrar seccions del llenç (no limitades a rectangles, com ho fa el mètode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}) i molt més.
Veure exemples de composició per al codi dels següents exemples.
{{EmbedLiveSample("Compositing_example", 750, 6750, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}
Una trajectòria de retall és com una forma de llenç normal, però actua com una màscara per ocultar parts no desitjades de formes. Això es visualitza en la imatge de la dreta. La forma d'estel vermell és la nostre trajectòria de retall. Tot el que queda fora d'aquesta trajectòria no es dibuixarà en el llenç.
Si comparem les trajectòries de retall amb la propietat globalCompositeOperation, que hem vist anteriorment, veiem dos modes de composició que aconsegueixen més o menys el mateix efecte en source-in i source-atop. Les diferències més importants entre les dues, són que les trajectòries de retall mai es dibuixen realment al llenç i la trajectòria de retall mai es veu afectada per l'addició de noves formes. Això fa que les trajectòries de retall siguin ideals per dibuixar múltiples formes en un àrea restringida
En el capítol sobre dibuixar formes, només s'ha esmentat els mètodes stroke() i fill(), però hi ha un tercer mètode que es pot utilitzar amb les trajectòries, anomenat clip().
Utilitzar clip() en lloc de closePath() per tancar una trajectòria i convertir-la en una trajectòria de retall en lloc de traçar o emplenar la trajectòria.
Per defecte, l'element {{HTMLElement("canvas")}}, té una trajectòria de retall de la mateixa grandària que el propi llenç. En altres paraules, no es produeix cap retall.
clipEn aquest exemple, utilitzarem un trajectòria de retall circular per restringir el dibuix d'un conjunt d'estels aleatòries a una regió en particular.
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillRect(0, 0, 150, 150);
ctx.translate(75, 75);
// Crea una trajectòria de retall circular
ctx.beginPath();
ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
ctx.clip();
// dibuixa el fons
var lingrad = ctx.createLinearGradient(0, -75, 0, 75);
lingrad.addColorStop(0, '#232256');
lingrad.addColorStop(1, '#143778');
ctx.fillStyle = lingrad;
ctx.fillRect(-75, -75, 150, 150);
// dibuixa els estels
for (var j = 1; j < 50; j++) {
ctx.save();
ctx.fillStyle = '#fff';
ctx.translate(75 - Math.floor(Math.random() * 150),
75 - Math.floor(Math.random() * 150));
drawStar(ctx, Math.floor(Math.random() * 4) + 2);
ctx.restore();
}
}
function drawStar(ctx, r) {
ctx.save();
ctx.beginPath();
ctx.moveTo(r, 0);
for (var i = 0; i < 9; i++) {
ctx.rotate(Math.PI / 5);
if (i % 2 === 0) {
ctx.lineTo((r / 0.525731) * 0.200811, 0);
} else {
ctx.lineTo(r, 0);
}
}
ctx.closePath();
ctx.fill();
ctx.restore();
}
<canvas id="canvas" width="150" height="150"></canvas>
draw();
En les primeres línies de codi, dibuixem un rectangle negre de la grandària del llenç com a fons, després traslladem l'origen al centre. A continuació, creem la trajectòria de retall circular, dibuixant un arc i cridem clip(). Les trajectòries de retall també formen part de l'estat de guardat del llenç. Si haguéssim volgut mantenir la trajectòria de retall original, podríem haver guardat l'estat del llenç abans de crear el nou.
Tot el que es dibuixa després de crear la trajectòria de retall, només apareixerà dins d'aquesta trajectòria. Es pot veure això clarament, en el gradient lineal que es dibuixa a continuació. Després d'això, es dibuixa un conjunt de 50 estels posicionats aleatòriament i escalats, usant la funció personalitzada drawStar(). De nou, els estels, només apareixen dins de la trajectòria de retall definida.
{{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}
{{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}