Przycinanie i maskowanie
Przycinanie jest operacją określającą, co na obrazie będzie widoczne, a co nie będzie widoczne.
Wszystko co narysowane zostanie przed operacją maskowania – będzie widoczne ‘pod spodem’ i nie będzie maskowane (zielone koło).
Operacją rysowania na ostatniej ścieżce otwartej przed wydaniem polecenia clip() służy do ustalenia obszaru przycięcia (obszaru maski). Obszar widoczny (otwór maski) to obszar będący przecięciem (iloczynem logicznym) obszaru canvas i obszaru wyznaczanego przez ostatnią ścieżkę (w przykładzie jest to obszar koła). Reszta canvas jest niewidoczna.
Wszystko co narysujemy po wydaniu polecenia clip(), a przed restore() będzie rysowane (pomarańczowy napis) na canvas pod maską (widoczne lub nie – część niewidoczna nie jest tak naprawdę rysowana).
Jeśli chcemy rysować ‘na wierzchu’ (niebieski okrąg) musimy odtworzyć stan canvas przed wydaniem polecenia save().
Listing
var cv = document.getElementById("canvas");
var ctx = cv.getContext("2d");
var x = 250;
var y = 250;
var radius = 75;
ctx.fillStyle="green";
ctx.arc(x-100, y-30, radius, 0, 2 * Math.PI, false);
ctx.fill();
ctx.save();
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
ctx.clip();
ctx.beginPath();
ctx.fillStyle = "orange";
ctx.font = "70px sans-serif";
ctx.fillText("Urszula", 100, 250);
ctx.restore();
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
ctx.lineWidth = 3;
ctx.strokeStyle = "blue";
ctx.stroke();