javascript - How to clear specific line in Canvas : HTML5 -

i totally new canvas element. able draw line in canvas, not able clear 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(){         = 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/

about canvas, canvas 'elements', , visibility of `elements' ...

when element on canvas needs change (move, erase, etc), standard method erase canvas , redraw canvas elements in new positions (or not redraw elements if erased).

that's because canvas not "remember" drew individual element , therefore cannot individually move or erase element.

it's "remember" enough information element redraw after canvas has been erased.

a demo: http://jsfiddle.net/m1erickson/wrk2e/

so in example create javascript objects a , b represent top-right , left-bottom line paths.

each object have points define line-path , flag indicating if visible (visible == redrawn on canvas).

// create object containing top-right lines // object contains path points & if visible or not var a={   path:[10,10, 300,10, 300,300],   isvisible:false, }  // create object containing left-bottom lines // object contains path points & if visible or not var b={   path:[10,10, 10,300, 300,300],   isvisible:false, } 

for easy processing can put line-path objects in array:

// array containing line-path objects var myobjects=[a,b]; 

then when clear canvas use each objects line-path information redraw line. if particular objects visibility flag false don't redraw particular object.

// clear entire canvas  // redraw line-paths 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 current untranslated context state     context.save();      // draw lines through each point in 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 context untranslated state     context.restore(); } 

with in place, buttons change visibility flag on particular line-path object , clear/redraw entire canvas.

// use buttons set & clear visibility flags on objects // in cases, clear entire canvas , redraw 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); });