HTML and CSS Reference
In-Depth Information
Discussion
The canvas element's state defaults to a clipping mask that comprises the entire visible
area of the canvas element. Once you define a clipping mask using the clip(...) com-
mand, that clipping mask will remain in effect for all future drawing commands, until
you change or reset it.
Just as we saw in Recipe 9.7 , you can use stack management of the element's state to
make a temporary clipping mask change, and then roll it back to the default (entire
element), as shown in Figure 9-15 :
mycontext. save ();
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);
mycontext. restore (); // back to default <canvas> state (including clipping)
mycontext.font = "25pt Arial";
mycontext.fillText("ello World", 70, 70); // black text, not clipped
Figure 9-15. Rolling back to previous clipping mask state
See Also
The W3C specification on clipping at http://www.w3.org/TR/2dcontext/#clipping-re
gion .
 
Search WWH ::




Custom Search