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.

Advertisements

10 thoughts on “Create simple Signature pad with HTML5 Canvas and jQuery Mobile

    • @David
      As per jQuery Mobile documentation, I think it should work by using jQuery mobile events: vmousedown, vmousemove’ and vmouseup. Even I didn’t get chance to test it on touch devices. Let me work around on this. David please let me know if you have any solution to work with touch event.

      Thanks

  1. Thank you for your siple Signature application. It works fine on my Android Samsung phone, on Opera and Safari viewers. But I have problems running on Google Chrome viewer. The Sign pad window closes immediately. Do I have to write a separate code for Google Chrome?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s