Skip to main content
Known Participant
October 23, 2024
Answered

Masking a bitmap image createjs

  • October 23, 2024
  • 1 reply
  • 855 views

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 has been closed for replies.
    Correct answer JoãoCésar17023019

    Hi.

     

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

     

    Regards,

    JC

    1 reply

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community ExpertCorrect answer
    Community Expert
    October 23, 2024
    Rob_NZAuthor
    Known Participant
    October 23, 2024

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

    JoãoCésar17023019
    Community Expert
    Community Expert
    October 23, 2024

    Great! You're welcome.

     

    Please let us know if you need more help.

     

    Regards,

    JC