how to disable javascript function on a specific condition

Hi I am not sure if the topic is explain my problem but the situation is: I have a canvas and draw things when on mousedown , and I have a generate button that generates new canvas' again you can draw things in same way.. BUT the problem is when you click the previous canvas it started to draw the new one.. It must not draw the new canvas the function has to stop there .. here is the drawing function

canvas.onmousedown = function(e) {
if (!painting) {
    painting = true;
} else {
    painting = false;
}

lastX = e.pageX - this.offsetLeft;
lastY = e.pageY - this.offsetTop;
};

canvas.onmousemove = function(e) {
if (painting) {
    mouseX = e.pageX - this.offsetLeft;
    mouseY = e.pageY - this.offsetTop;

    // find all points between        
    var x1 = mouseX,
        x2 = lastX,
        y1 = mouseY,
        y2 = lastY;


    var steep = (Math.abs(y2 - y1) > Math.abs(x2 - x1));
    if (steep){
        var x = x1;
        x1 = y1;
        y1 = x;

        var y = y2;
        y2 = x2;
        x2 = y;
    }
    if (x1 > x2) {
        var x = x1;
        x1 = x2;
        x2 = x;

        var y = y1;
        y1 = y2;
        y2 = y;
    }

    var dx = x2 - x1,
        dy = Math.abs(y2 - y1),
        error = 0,
        de = dy / dx,
        yStep = -1,
        y = y1;

    if (y1 < y2) {
        yStep = 1;
    }

    for (var x = x1; x < x2; x++) {
        if (steep) {
            ctx.fillRect(y, x, 1, 1);
        } else {
            ctx.fillRect(x, y, 1, 1);
        }

        error += de;
        if (error >= 0.5) {
            y += yStep;
            error -= 1.0;
        }
    }



    lastX = mouseX;
    lastY = mouseY;

}
};

Here is jsfiddle for the issue http://jsfiddle.net/regeme/eV6kW/3/ any help would be great