html canvas not clearing

Question

i have set up a pen here http://codepen.io/prantikv/pen/GgNNwQ?editors=101

i am using the mosuedown method and then using the event to draw the lines like so:

var signTouch=false;
var penWidth=2;
var el = document.getElementById('signPad');
var jqEl = jQuery('#signPad')
var ctx = el.getContext('2d');
ctx.lineWidth = penWidth;
ctx.canvas.width=window.innerWidth;
var isDrawing;


el.onmousedown = function(e) {
  signTouch=true;
  isDrawing = true;
  ctx.lineWidth = penWidth;
  ctx.lineJoin = ctx.lineCap = 'round';
  ctx.moveTo(e.clientX - jqEl.position().left, e.clientY - jqEl.position().top);
};

el.onmousemove = function(e) {
  if (isDrawing) {
  console.log(e);
    ctx.lineTo(e.clientX - jqEl.position().left, e.clientY - jqEl.position().top);
    ctx.stroke();
  }
};

el.onmouseup = function() {
  isDrawing = false;
};


$(document).on('pageshow', '#index' ,function () {
 $("#popupCloseRight").popup( "open" );

});


$("#nextchk").click(function(){  
       ctx.clearRect(0,0,el.width,el.height);
 });

the last function should clear the canvas. It does clear it but then lines form the previously drawn canvas reappear.

I am not using any arrays to store the path yet i am missing some basic knowledge in the e.clickX is it an array?

kindly suggest

Answer 1

You never created a ctx.beginPath(); so it will always save your original drawing.

 el.onmousedown = function(e) {
      signTouch=true;
      isDrawing = true;
      ctx.beginPath();
      ctx.lineWidth = penWidth;
      ctx.lineJoin = ctx.lineCap = 'round';
      ctx.moveTo(e.clientX - jqEl.position().left, e.clientY - jqEl.position().top);
    };

Answer 2

You must start a new path each time, otherwise the canvas will still "remember" previous lines because it will consider them all the same path.

el.onmousedown = function(e) {
    ctx.beginPath();
    // Enable drawing
};

var signTouch = false;
var penWidth = 2;

var el = document.getElementById('signPad');
var jqEl = jQuery('#signPad')
var ctx = el.getContext('2d');
ctx.lineWidth = penWidth;
ctx.canvas.width = window.innerWidth;
var isDrawing;

el.onmousedown = function(e) {
  ctx.beginPath();
  signTouch = true;
  isDrawing = true;
  ctx.lineWidth = penWidth;
  ctx.lineJoin = ctx.lineCap = 'round';
  ctx.moveTo(e.clientX - jqEl.position().left, e.clientY - jqEl.position().top);
};

el.onmousemove = function(e) {
  if (isDrawing) {
    console.log(e);
    ctx.lineTo(e.clientX - jqEl.position().left, e.clientY - jqEl.position().top);
    ctx.stroke();
  }
};

el.onmouseup = function() {
  isDrawing = false;
};

$("#mypanel a").click(function() {
  if ($(this).index() == 3) {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    $("#mypanel").panel("close");
  }
});

$("#mypanel").on("panelclose", function(event, ui) {
  console.log($("#slider").val());
  penWidth = $("#slider").val();
});

$("#nextchk").click(function() {
  ctx.clearRect(0, 0, el.width, el.height);
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>

<div id="index" data-role="page" class="loading modal">

  <div data-role="header">
    <!-- <a href="#" id="refBtn" data-icon="refresh" class="ui-btn-left">Reset</a> -->
    <a href="#mypanel" id="#" data-icon="bars" class="ui-btn-left">Menu</a>
    <h1>demo</h1>
    <a href="#" id="nextchk" data-icon="arrow-r" class="ui-btn-right">Next</a>
  </div>
  <!-- /header -->

  <div data-role="content">
    <canvas id="signPad" width="600" height="300"></canvas>


    <div data-role="popup" id="popupCloseRight" class="ui-content" style="max-width:280px">
      <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
      <p>demo</p>
    </div>

  </div>
  <!-- /content -->

  <div data-role="panel" id="mypanel" data-position="left" data-display="overlay">
    <label for="slider">size:</label>
    <input type="range" name="slider" id="slider" value="5" min="0" max="10" />
    <a href="#" data-rel="close" data-role="button">Set</a> 
    <a href="#" data-role="button">Link button</a> 
  </div>
  <!-- /panel -->

</div>
<!-- /content -->
<!-- /page -->