clear specific line - Javascript Canvas

Description

clear specific line
Demo Code

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//from w  w  w  .j  ava  2  s .  c o m
$(document).ready(function(){
    var lineStateA = 0;
    var lineStateB = 0;
    var drawA = 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();
        lineStateA = 1;
    };
    var drawB = 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();
        lineStateB = 1;
    };
    canvas =  document.getElementById("cvs");
    $("#reDrowA").on("click",function(){
        drawA();
    });
    $("#reDrowB").on("click",function(){
        drawB();
    });
    $("#clearA").on("click",function(){
       a.clearRect(0, 0, canvas.width, canvas.height);
       lineStateA = 0;
       if (lineStateB) {
           drawB();
       };
    });
    $("#clearB").on("click",function(){
        b.clearRect(0, 0, canvas.width, canvas.height);
        lineStateB = 0;
        if (lineStateA) {
            drawA();
        };
    });
});
    });

      </script> 
   </head> 
   <body> 
      <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">  
   </body>
</html>
clear specific line - Javascript Canvas

Description

Demo Code

Related Tutorials
