how to mask a video in createjs

Question

I was looking at doing something along the lines of what is done here:

http://viget.com/extend/masking-video-tags-using-html5-canvas

Where the globalCompositeOperation is used to set the masked area.

function drawMaskedVideo() {
    ctx.save();

    // Draw the video feed
    ctx.drawImage(video, 0, 0);

    // Set the composite operation, which is responsible for masking
    // see https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html
    ctx.globalCompositeOperation = 'destination-in';

    // Apply the mask
    ctx.drawImage(mask, 0, 0);

    ctx.restore();
}

requestAnimationFrame(function loop() {
    requestAnimationFrame(loop.bind(this));
    drawMaskedVideo();
});

However I'm not sure how well this will integrate with createjs, has anyone seen it done in createjs, I haven't found any examples, although I did notice that a bitmap source can be a video. http://www.createjs.com/Docs/EaselJS/classes/Bitmap.html

Answer 1

You can use a Video as a source for a Bitmap. You can then mask the Bitmap. The Bitmap just does a drawImage() with the source whenever the stage is updated. Note that the mask will orient itself with the Bitmap, so you don't need to manually move the mask, unless you want to change it relative to the video.

var bmp = new createjs.Bitmap(videoHTMLTag);
bmp.mask = new createjs.Shape(new createjs.Graphics().beginFill("#000").drawRect(0,0,100,100));

Make sure to update the stage constantly, or the video will not change from the first time it gets rendered.

createjs.Ticker.on("tick", stage);

Answer 2

You can move the container to whatever the position you want to and offfset the image contained to the position you want.The can be done by adding the image that you want to mask to the container.

See this one for more info.I think this is what you wanted