Adobe Animate Canvas

[Excelebi]

hello! I want to use bitmap image as masked object from shape that is generated by user input:

// Load the image
var image = new Image();
image.src="image.jpg";
var bitmap = new createjs.Bitmap(image);
bitmap.cache(0, 0, image.width, image.height);
var drawingShape = new createjs.Shape();


// Handle user input for drawing
stage.addEventListener("stagemousedown", startDrawing);
stage.addEventListener("stagemousemove", continueDrawing);
stage.addEventListener("stagemouseup", stopDrawing);

var isDrawing = false;
var lastX, lastY;

function startDrawing(event) {
    isDrawing = true;
    var pt = drawingShape.globalToLocal(event.stageX, event.stageY);
    lastX = pt.x;
    lastY = pt.y;
	updateCanvas();
}

function continueDrawing(event) {
    if (!isDrawing) return;

    var pt = drawingShape.globalToLocal(event.stageX, event.stageY);

    // Draw a line segment
    drawingShape.graphics.setStrokeStyle(40, "round").beginStroke("#000").moveTo(lastX, lastY).lineTo(pt.x, pt.y).endStroke();

    lastX = pt.x;
    lastY = pt.y;

    updateCanvas();
}

function stopDrawing(event) {
    isDrawing = false;
}


function updateCanvas() {
	stage.addChild(bitmap);
	bitmap.mask = drawingShape;
	stage.addChild(drawingShape);
	stage.update();
}

updateCanvas()

But image not showing on top, where might be a problem?

[kglad]

there are a couple of problems.  the main one is you're not adding your bitmap to the display.

try:

displayPicture('image.jpg');

function displayPicture(imgPath) {

var image = new Image();

image.onload = onLoadF;

image.src=imgPath;

}

function onLoadF(e) {

// Create a Bitmap from the loaded image

var img = new createjs.Bitmap(e.target)

stage.addChild(img);

//positionF(img);

// Render Stage

stage.update();

}

[Excelebi]

It didn't change anything, still not working. I already had all these steps to begin with.

[kglad]

your code is not the same.

use the code i suggested and open the developer console to see what you're doing incorrectly.

[Excelebi]

I tryed It didn't work or return any errors, it's also work same as mine. Did you try your solution?

[kglad]

the code i suggested works fine for me. 

how are you testing?

[Excelebi]

Please have a little bit of respect. It's not working and you complitely miss the point of what i'm trying to do. I never had a problem with displaying image in a first place and my code is doing fine with that. All i trying to do is to clip an image with a shape. Like USER DRAWING -> Revealing the image incide the brush stroke.

[JoãoCésar]

Hi.

Maybe the approach of this example will be helpful:
https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/painting_app

Please let us know.

Regards,

JC

[Excelebi]

Thank you for your participation.

Your example is amaizing, i learnd a lot just by glancing on this, but the main point of this thread is this:

bitmap.mask = drawingShape;

 All i trying to do is to clip an image with a shape. Like USER DRAWING -> Revealing the image incide the brush stroke.

[JoãoCésar]

Sorry. I sent the wrong example. This one should be closer to what you want:
https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/scratch

https://adobe-animate-scratch.netlify.app

Please let us know.