Create simple Signature pad with HTML5 Canvas and jQuery Mobile

Hi Guys,

I am going to share how to create simple signature pad with new HTML5 canvas element and with jQuery mobile.

Find below HTML code for signature pad popup div with id=”divPopUpSignContract”. This popup div contains only HTML5 canvas element and two buttons for submit and clear.

<divdata-role="popup"id="divPopUpSignContract">
		<divdata-role="header"data-theme="b">
			<adata-role="button"data-rel="back"data-transition="slide"class="ui-btn-right"onclick="closePopUp()"> Close </a>
			<pclass="popupHeader">Sign Pad</p>
		</div>
		<divclass="ui-content popUpHeight">
			<divid="div_signcontract">
				<canvasid="canvas">Canvas is not supported</canvas>
				<div>
					<inputid="btnSubmitSign"type="button"data-inline="true"data-mini="true"data-theme="b"value="Submit Sign"onclick="fun_submit()"/>
					<inputid="btnClearSign"type="button"data-inline="true"data-mini="true"data-theme="b"value="Clear"onclick="init_Sign_Canvas()"/>
				</div>
			</div>	
		</div>
	</div>

Now let’s look at my javascript code, the function init_Sign_Canvas used to initialize and set canvas background and canvas width. Early I was using using jQuery mobile events: ‘vmousedown’, ‘vmousemove’ and ‘vmouseup’ hope it should work with touch devices. I didn’t get chance to test with touch devices.

But as some guys have issue with touch devices(iPad), now I have update my code and use simply mouse events (mousedown, mousemove and mouseup) to support desktop devices as well as I’m using touch events (touchstart, touchmove and touchend) to support touch devices. I have test this on my Nexus 4 with chrome browser and it’s seems working. Please check with your devices and let me know your review in comments.

function init_Sign_Canvas() {
			isSign = false;
			leftMButtonDown = false;

			//Set Canvas width
			var sizedWindowWidth =$('#div_signcontract').width();
			if(sizedWindowWidth > 700)
				sizedWindowWidth = $(window).width() / 2;
			else if(sizedWindowWidth > 400)
				sizedWindowWidth = sizedWindowWidth - 50;
			else
				sizedWindowWidth = sizedWindowWidth - 20;

			 $("#canvas").width(sizedWindowWidth);
			 $("#canvas").height(200);
			 $("#canvas").css("border","1px solid #000");

			 var canvas = $("#canvas").get(0);

			 canvasContext = canvas.getContext('2d');

			 if(canvasContext)
			 {
				 canvasContext.canvas.width  = sizedWindowWidth;
				 canvasContext.canvas.height = 200;

				 canvasContext.fillStyle = "#fff";
				 canvasContext.fillRect(0,0,sizedWindowWidth,200);

				 canvasContext.moveTo(50,150);
				 canvasContext.lineTo(sizedWindowWidth-50,150);
				 canvasContext.stroke();

				 canvasContext.fillStyle = "#000";
				 canvasContext.font="20px Arial";
				 canvasContext.fillText("x",40,155);
			 }
			 // Bind Mouse events
			 $(canvas).on('mousedown', function (e) {
				 if(e.which === 1) { 
					 leftMButtonDown = true;
					 canvasContext.fillStyle = "#000";
					 var x = e.pageX - $(e.target).offset().left;
					 var y = e.pageY - $(e.target).offset().top;
					 canvasContext.moveTo(x, y);
				 }
				 e.preventDefault();
				 return false;
			 });

			 $(canvas).on('mouseup', function (e) {
				 if(leftMButtonDown && e.which === 1) {
					 leftMButtonDown = false;
					 isSign = true;
				 }
				 e.preventDefault();
				 return false;
			 });

			 // draw a line from the last point to this one
			 $(canvas).on('mousemove', function (e) {
				 if(leftMButtonDown == true) {
					 canvasContext.fillStyle = "#000";
					 var x = e.pageX - $(e.target).offset().left;
					 var y = e.pageY - $(e.target).offset().top;
					 canvasContext.lineTo(x,y);
					 canvasContext.stroke();
				 }
				 e.preventDefault();
				 return false;
			 });

			 //bind touch events
			 $(canvas).on('touchstart', function (e) {
				leftMButtonDown = true;
				canvasContext.fillStyle = "#000";
				var t = e.originalEvent.touches[0];
				var x = t.pageX - $(e.target).offset().left;
				var y = t.pageY - $(e.target).offset().top;
				canvasContext.moveTo(x, y);

				e.preventDefault();
				return false;
			 });

			 $(canvas).on('touchmove', function (e) {
				canvasContext.fillStyle = "#000";
				var t = e.originalEvent.touches[0];
				var x = t.pageX - $(e.target).offset().left;
				var y = t.pageY - $(e.target).offset().top;
				canvasContext.lineTo(x,y);
				canvasContext.stroke();

				e.preventDefault();
				return false;
			 });

			 $(canvas).on('touchend', function (e) {
				if(leftMButtonDown) {
					leftMButtonDown = false;
					isSign = true;
				}

			 });
		}

Please find updated source code to myGitHub repository. Also, find Demo here.