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