How to clear specific line in Canvas : HTML5

Question

I am totally new to this Canvas Element. I am able to draw line in canvas, but not able to clear only specif line. Whole canvas become blank.

Tried this: HTML:

<canvas id="cvs" width="400" height="400"></canvas>
<hr />
<input type="submit" id="reDrowA" value="Draw A" />
<input type="submit" id="reDrowB" value="Draw B" />
<hr />
<input type="submit" id="clearA" value="Clear A" />
<input type="submit" id="clearB" value="Clear B" />

Script

$(document).ready(function(){
    canvas =  document.getElementById("cvs");    
    $("#reDrowA").on("click",function(){
        a = canvas.getContext('2d');
        a.translate(0.5, 0.5);
        a.beginPath();
        a.setLineDash([2,10]);
        a.moveTo(10,10);
        a.lineTo(300,10);
        a.lineTo(300,300);
        a.stroke();
    });
    $("#reDrowB").on("click",function(){
        b = canvas.getContext('2d');
        b.translate(0.5, 0.5);
        b.beginPath();
        b.setLineDash([2,10]);
        b.moveTo(10,10);
        b.lineTo(10,300);
        b.lineTo(300,300);
        b.stroke();
    });
    $("#clearA").on("click",function(){
       a.clearRect(0, 0, canvas.width, canvas.height);
    });
    $("#clearB").on("click",function(){
        b.clearRect(0, 0, canvas.width, canvas.height);
    });

});

Fiddle: http://jsfiddle.net/8YNvu/

Answer 1

About Canvas, Canvas 'elements', and the visibility of `elements' ...

When any element on the canvas needs to change (move, erase, etc), the standard method is to completely erase the canvas and redraw the canvas with the elements in their new positions (or not redraw the elements if they are erased).

That's because canvas does not "remember" where it drew any individual element and therefore cannot individually move or erase any element.

It's up to you to "remember" enough information about an element to redraw it after the canvas has been erased.

A Demo: http://jsfiddle.net/m1erickson/Wrk2e/

So in your example you could create javascript objects a and b to represent your top-right and left-bottom line paths.

Each object would have the points which define its line-path and a flag indicating if it is visible (visible == redrawn on the canvas).

// create an object containing the top-right lines
// the object contains its path points & if it is visible or not
var a={
  path:[10,10, 300,10, 300,300],
  isVisible:false,
}

// create an object containing the left-bottom lines
// the object contains its path points & if it is visible or not
var b={
  path:[10,10, 10,300, 300,300],
  isVisible:false,
}

For easy processing you can put all your line-path objects in an array:

// an array containing all the line-path objects
var myObjects=[a,b];

Then when you clear the canvas you simply use each objects line-path information to redraw the line. If a particular objects visibility flag is false then don't redraw that particular object.

// clear the entire canvas 
// redraw any line-paths that are visible
function redrawAll(myObjects){
    context.clearRect(0,0,canvas.width,canvas.height);
    for(var i=0;i<myObjects.length;i++){
        if(myObjects[i].isVisible){
            drawLinePath(myObjects[i]);
        }
    }
}

// redraw 1 line-path
function drawLinePath(theObject){
    var points=theObject.path;
    // save the current untranslated context state
    context.save();

    // draw lines through each point in the objects path
    context.translate(0.5, 0.5);
    context.beginPath();
    context.setLineDash([2,10]);
    context.moveTo(points[0],points[1]);
    for(var i=2;i<points.length;i+=2){
        context.lineTo(points[i],points[i+1]);
    }
    context.stroke();

    // restore the context to its untranslated state
    context.restore();
}

With all this in place, your buttons simply change the visibility flag on a particular line-path object and then clear/redraw the entire canvas.

// use buttons to set & clear the visibility flags on objects
// In all cases, clear the entire canvas and redraw any visible objects

$("#reDrowA").on("click",function(){
    a.isVisible=true;
    redrawAll(myObjects);
});
$("#reDrowB").on("click",function(){
    b.isVisible=true;
    redrawAll(myObjects);
});
$("#clearA").on("click",function(){
    a.isVisible=false;
    redrawAll(myObjects);
});
$("#clearB").on("click",function(){
    b.isVisible=false;
    redrawAll(myObjects);
});

Answer 2

Canvas is transparent. It is not possible to acheive in single canvas tag. because the clearRect functionality to clear based on width and height. we didn't give the exact position to clear the canvas. Try the fiddle . you acheive the scenario with two canvas tags.

Fiddle