Html canvas not clearing
I created a pen here http://codepen.io/prantikv/pen/GgNNwQ?editors=101
I am using the mosuedown method and then using an event to draw lines like this:
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 is to clear the canvas. It clears it, but then the lines created by the previously drawn canvas are formed again.
I am not using any arrays to store the path, but I am missing some basic knowledge in e.clickX, is this an array?
kindly suggest
+3
source to share
2 answers
You have to start a new path each time, otherwise the canvas will still "remember" the previous lines, because it will consider them all the same paths.
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 -->
+1
source to share
You have never created ctx.beginPath (); so it will always keep the 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);
};
0
source to share