Using and Managing Bitmap Images - Beginning HTML5 Games with CreateJS - page 80

Masking and Clipping
Along with filters, you can also apply masking and clipping to bitmaps. To use masking, simply use a Shape object,
and apply it to the display object's mask property.
myBitmap.mask = myShape;
Listing 5-7 shows how you can apply a circle shape as the mask for a loaded photograph.
Listing 5-7. Masking a Photo Using a Shape
var bmp = new createjs.Bitmap('img/mam.png');
var circle = new createjs.Shape(new createjs.Graphics().drawCircle(0,0,250));
circle.x = 620;
circle.y = 300;
stage.addChild(bmp);
bmp.mask = circle;
stage.update();
The shape is simply positioned and set as the mask for the photograph. You can use any shape, simple like this
circle or as complex as a star, to mask display objects. Figure 5-6 shows your masked photograph.
Figure 5-6. Photograph with a circular mask using a shape object
Masking can be extremely handy in a lot of situations. Take a look at a simple, yet clever example where masking
is used to see the inside of a teddy bear (see Listing 5-8). Some controls will be added to the mask as well to give it
some fun interaction.