CreateJS masking images behind the bask

Question

So I have a canvas with multiple elements within it. I want to apply a image mask to an image so it only shows a portion of that image. My problem is that what i need to do is position the mask relative to the stage but only show the part of the image that is behind that mask. The reason i need to do this is that I am going to be manipulating the image (rotate, scale, skew, etc...). Its quite hard to explain so if you need anymore details please let me know. I have given some images below to help explain.

So as you can see from the images below i need the mask to stay in the same place but only show what is in the circle. So as i move and manipulate the image i need the mask to stay in the same place but show what part of the image is behind it.

Answer 1

You should be able to make a Container, which has:

1. A Bitmap as the first child, which has the image
2. A black overlay Shape as the second child
3. A second Bitmap with the same image
4. A mask shape, which is applied to the Shape

The mask shape can move relative to the Bitmap/Shape, and then the Container can be transformed as a whole.

The below code shows the basic approach - but the example here has some extra flair to make it look and do what you are asking, as well as some comments showing what is happening.

var c = new createjs.Container().set();
var b = new createjs.Bitmap(image);
var o = new createjs.Shape(new createjs.Graphics().f("#000").dr(0,0,imageWidth,imageHeight));
var b2 = new createjs.Bitmap(image);
var m = new createjs.Shape(new createjs.Graphics().dc(0,0,50));
b2.mask = m;

c.addChild(b, o, b2);
stage.addChild(c);

Cheers.