Canvas - HTML5 - page 210

9.9 Clipping <canvas> Drawings
Problem
You want to use a drawing command, but you want to clip the drawing by some other
shape that you define.
Solution
The canvas API provides the command clip(...) , which will take the currently defined
path and use that as a clipping mask for subsequent drawing commands. This means
the canvas element will only draw inside the defined clipping mask boundaries and will
discard any drawing outside the path.
To add the text of the letter “H” but clip it by a circle, you would do this:
mycontext.beginPath();
mycontext.arc(50, 50, 25, 0, Math.PI * 2, true); // circle path
mycontext. clip (); // make the path our clipping mask
mycontext.fillStyle = "#f00";
mycontext.font = "50pt Arial";
mycontext.fillText("H", 25, 75);
The result of the circle-clipped “H” is shown in Figure 9-14 .
Figure 9-14. Clipping a text command with a circle path
As you can see, the circle itself was not drawn; instead, it was used as the clipping path
for the subsequent fillText drawing command.