Skip to main content
Known Participant
October 23, 2024
Answered

Masking a bitmap image createjs

  • October 23, 2024
  • 1 reply
  • 851 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
    JoãoCésar17023019Correct answer
    Inspiring
    October 23, 2024
    Rob_NZAuthor
    Known Participant
    October 29, 2024

    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 scratchedIs there an easy way to do this or will it require changing a lot of the code? 

    JoãoCésar17023019
    Inspiring
    October 31, 2024

    Hey, @Rob_NZ!

     

    Totally forgot. Really sorry.

    Have you found a solution?