网格线开关HMTL5帆布

Question

I want to make grid line x and y with switch(ON/OFF) but the HTML5 canvas is rendering previous drawn lines even after ctx.clearRect, I just want to on and off the lines with the same buttons. Here is my fiddle

http://jsfiddle.net/5uayd/1/

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');

  var gridline_x = false,gridline_y = false;

  var grid_x = function(){
      gridline_x = (gridline_x)?false:true;
      GridLines();
  };

  var grid_y = function(){
      gridline_y = (gridline_y)?false:true;
      GridLines();
  };


  var GridLines = function(){

        var ctx = canvas.getContext('2d');
        ctx.clearRect(0,0,canvas.width,canvas.height);


        console.log('Grid  X: '+gridline_x + ' Grid Y: '+gridline_y);
        ctx.save(); 

        if(gridline_y)
        for(var i = 1; i < canvas.width; i += 50) {

            ctx.moveTo( i, 0 );
            ctx.lineTo( i, canvas.height);

        }


        if(gridline_x)
        for(var i = 1; i < canvas.height ; i += 50) {

            ctx.moveTo( 0, i );
            ctx.lineTo( canvas.width, i);
        }

        ctx.strokeStyle = 'hsla(0, 0%, 40%, .5)';
        ctx.stroke();
        ctx.restore();



        //ctx.restore();
    };

the lines don't remove on second click

Answer 1

Put ctx.beginPath() just after your ctx.save .

beginPath tells the browser you're done with previous path drawings and are beginning a new drawing.

Without beginPath , all the previous drawings will be redrawn--even after clearRect