CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvaseaseljs
user2157847
user2157847

Reputation:

How do I erase an image on html5 canvas

I have a html5 canvas where you can erase the blur on top of an image. I would like to replace the blur with another image. I would like the end result to be once you erase the top image the bottom image will appear below it. I have been using an easeljs demo as a template.

http://www.createjs.com/#!/EaselJS/demos/alphamask

I feel like what I need to edit is in the html page script but it might be much deeper than that.

(Full code can be viewed here)

HTML

<canvas id="testCanvas" width="960" height="400"></canvas>

JavaScript

var stage;
var isDrawing;
var drawingCanvas;
var oldPt;
var oldMidPt;
var displayCanvas;
var image;
var bitmap;
var maskFilter;
var cursor;
var text;
var blur;

function init() {
    if (window.top != window) {
        document.getElementById("header").style.display = "none";
    }

    document.getElementById("loader").className = "loader";

    image = new Image();
    image.onload = handleComplete;
    image.src = "images/summer.jpg";

    stage = new createjs.Stage("testCanvas");
    text = new createjs.Text("Loading...", "20px Arial", "#999999");
            text.set({x:stage.canvas.width/2, y:stage.canvas.height-80});
    text.textAlign = "center";
}

function handleComplete() {
    document.getElementById("loader").className = "";
    createjs.Touch.enable(stage);
    stage.enableMouseOver();

    stage.addEventListener("stagemousedown", handleMouseDown);
    stage.addEventListener("stagemouseup", handleMouseUp);
    stage.addEventListener("stagemousemove", handleMouseMove);
    drawingCanvas = new createjs.Shape();
    bitmap = new createjs.Bitmap(image);

    blur = new createjs.Bitmap(image);
    blur.filters = [new createjs.BoxBlurFilter(15,15,2)];
    blur.cache(0,0,960,400);
    blur.alpha = .5;

    text.text = "Click and Drag to Reveal the Image.";

    stage.addChild(blur, text, bitmap);
    updateCacheImage(false);

    cursor = new createjs.Shape(new     createjs.Graphics().beginFill("#FFFFFF").drawCircle(0,0,20));
    cursor.cursor = "pointer";

    stage.addChild(cursor);
}

function handleMouseDown(event) {
    oldPt = new createjs.Point(stage.mouseX, stage.mouseY);
    oldMidPt = oldPt;

    isDrawing = true;
}

function handleMouseMove(event) {
    cursor.x = stage.mouseX;
    cursor.y = stage.mouseY;

    if (!isDrawing) {
        stage.update();
        return;
    }

    var midPoint = new createjs.Point(oldPt.x + stage.mouseX>>1, oldPt.y+stage.mouseY>>1);

            drawingCanvas.graphics.setStrokeStyle(40, "round", "round")
                .beginStroke("rgba(0,0,0,0.15)")
                .moveTo(midPoint.x, midPoint.y)
                .curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);

    oldPt.x = stage.mouseX;
    oldPt.y = stage.mouseY;

    oldMidPt.x = midPoint.x;
    oldMidPt.y = midPoint.y;

    updateCacheImage(true);

}

function handleMouseUp(event) {
    updateCacheImage(true);
    isDrawing = false;
}

function updateCacheImage(update) {
    if (update) {
        drawingCanvas.updateCache(0, 0, image.width, image.height);
    } else {
        drawingCanvas.cache(0, 0, image.width, image.height);
    }

    maskFilter = new createjs.AlphaMaskFilter(drawingCanvas.cacheCanvas);

    bitmap.filters = [maskFilter];
    if (update) {
        bitmap.updateCache(0, 0, image.width, image.height);
    } else {
        bitmap.cache(0, 0, image.width, image.height);
    }

    stage.update();
}

Upvotes: 1

Views: 1853

Answers (2)

Olaf Horstmann
Olaf Horstmann

Reputation: 16882

If you simply want to replace the blur-image, you have to change the following parts:

Add this after the loading of the first image:

image.src = "images/summer.jpg";
// add new part
image2 = new Image();
image2.onload = handleComplete;
image2.src = "images/your_newImage.jpg";

In the handleComplete() you now wait for 2 images to be loaded, so you add this:

function handleComplete() {
    loaded++; // and initialize this variable in the very top with: var loaded = 0;
    if ( window.loaded < 2 ) return;
    //... other stull

and finally you change the following lines:

// old
blur = new createjs.Bitmap(image);
blur.filters = [new createjs.BoxBlurFilter(15,15,2)];
blur.cache(0,0,960,400);
blur.alpha = .5;

// new
blur = new createjs.Bitmap(image2);

This should now replace the blurred image with your desired image, it's not the best way, but it should get you there. I recommend you to start with some tutorial if you are planing to do more "deeper" stuff ;)

Upvotes: 1

Funkyguy
Funkyguy

Reputation: 620

a common, though kinda janky, way is to re-size your canvas real quick. so changing your <canvas> elements width and height attributes. This will erase everything in your canvas.

Once that is done, reset it back to what you want it to be right away, and redraw the bottom image.

As I said this method is kinda sketchy but it does get the job done.

Upvotes: 1

Related Questions