Canvas - HTML5 - page 211

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