How do I erase an image on html5 canvas

Question

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

Answer 1

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