Masking a bitmap image createjs

[Rob_NZ]

I'm trying to develop a scratchcard effect by using the cursor to scratch and reveal an image.
The code below works for painting over the bitmap but I'd like to convert the painted lines to a mask that reveals the image. I'm wanting "Brush" to be the mask and "ImageToMask" is the bitmap.

Can anyone help?

var MDown = false;
var Canvas = document.getElementById('canvas2');
var Brush = Canvas.getContext('2d');
var BG = new lib.MaskedContent();
stage.addChild(ImageToMask);   
Canvas.onselectstart = function () {
    return false;
};
Canvas.onmousedown = function (e) {
    MDown = true;
    Brush.lineWidth = 80;
    Brush.lineCap = 'round';
    Brush.beginPath();
    Brush.moveTo(e.pageX - Position(Canvas)
        .left, e.pageY - 5);
}
Canvas.onmouseup = function () {
    MDown = false;
};
Canvas.onmousemove = function (e) {
    if (MDown) {
        Brush.lineTo(e.pageX - Position(Canvas).left, e.pageY - 5);
        Brush.stroke();
    }
}
function Position(el) {
    var position = {
        left: 0,
        top: 0
    };
    return position;
}

[JoãoCésar · Accepted solution]

Hi.

Please check this example out.
https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/scratch

Regards,

JC

[Rob_NZ]

Amazing! I think I could tailor that code to what I'm trying to achieve.
Thanks so much.

[JoãoCésar]

Great! You're welcome.

Please let us know if you need more help.

Regards,

JC

[Rob_NZ]

Thanks again for the code, I manged to mostly tailor it to my requirements and it's working well. I noticed that the scratch area is the bounds of the stage so var minProgressToReveal triggers once a percentage of the whole stage is scratched.

I have a rotated rectangle that I want to be the scratchable area only (see attached image), not the whole stage. I would like minProgressToReveal to trigger once a percentage of the blue rectangle is scratched. Is there an easy way to do this or will it require changing a lot of the code? 

[JoãoCésar]

Hey, @Rob_NZ!

Totally forgot. Really sorry.

Have you found a solution?

[Rob_NZ]

Hey, not a problem.  No, I didn't find a solution.