Delete only Text but not the Image using Canvas

Question

I am trying to delete Text in my canvas element, without loosing the Background-Image of the Canvas-Element.

I think I need to save the I

Answer 1

If you want a permanent image to write/erase/rewrite text on, you might try layering a canvas over an image:

HTML

CSS

    body{ background-color: ivory; padding:20px;}
    #wrapper{
        position:relative;
        width:300px;
        height:300px;
    }
    #bkImage{
        position:absolute; top:0px; left:0px;
        border:1px solid green;
        width:100%;
        height:100%;
    }
    #canvas{
        position:absolute; top:0px; left:0px;
        border:3px solid red;
        width:100%;
        height:100%;
    }

Then you can erase/rewrite text without having to clear the background image.

    function drawText(text,fill,stroke){
            ctx.clearRect(0,0,canvas.width,canvas.height);
            ctx.font="123px verdana";
            ctx.fillStyle=fill;
            ctx.strokeStyle=stroke;
            ctx.lineWidth=4;
            ctx.fillText(text,10,120);
            ctx.strokeText(text,10,120);
    }

Here’s code and a Fiddle: http://jsfiddle.net/m1erickson/fg5sV/

 









    Remove the text
    Change the text
    Original text