Skip to main content
Known Participant
Oct 23, 2024 3:24 AM UTC
Answered

Masking a bitmap image createjs

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;
}

 

    This topic is closed to new replies. Start a new post to keep the conversation going.
    JoãoCésar17023019
    JoãoCésar17023019Correct answer
    Community Expert
    Oct 23, 2024 11:22 AM UTC

    6 replies

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community ExpertCorrect answer
    Community Expert
    Oct 23, 2024 11:22 AM UTC

    Hi.

     

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

     

    Regards,

    JC

    Translate
    Rob_NZAuthor
    Known Participant
    Oct 23, 2024 11:34 AM UTC

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

    Translate
    JoãoCésar17023019
    Community Expert
    Community Expert
    Oct 23, 2024 11:47 AM UTC

    Great! You're welcome.

     

    Please let us know if you need more help.

     

    Regards,

    JC

    Translate