html5 simple drawing board using canvas for touch devices


HTML
Add html tag and add canvas element.
<canvas id=”pad” width=”1366″ height=”271″>
<p>Not Supported</p>
</canvas>

CSS

html, body {
	width:  100%;
	height: 100%;
	margin: 0px;
}

Javascript

isMobile: variable detects the current browser is support touch events or not because when we want the current position of browser in touch screen devices we can get it from event.targetTouches[0].pageX and event.targetTouches[0].pageY. However in normal browsers we can calculate by event.pageX – this.offsetLeft and event.pageY – this.offsetRight.

There is also different events on touch enabled devices, when you start drawing on browser it fires touchStart event where as the browser fire mouseDown  event.

please follow the table for equivalent event on browser and touch enable browser.

Browser: mouseDown, mouseMove, mouseUp

Mobile devices: touchStart, touchMove, touchEnd

click here for Demo

var isMobile;
	function isTouchDevice() {
	   var el = document.createElement('div');
	   el.setAttribute('ongesturestart', 'return;');
	   return typeof el.ongesturestart === "function";
	}

	isMobile = isTouchDevice();

	if(window.addEventListener) {
		window.addEventListener('load', function () {
			var canvas, context, draw;

			// Touch Events handlers
			draw = {
				started: false,
				start: function(event) {

					context.beginPath();
					if (isMobile){
						context.moveTo(
							event.targetTouches[0].pageX,
							event.targetTouches[0].pageY
						);
					}else{
						context.moveTo(
							event.pageX - this.offsetLeft, 
							event.pageY - this.offsetTop
						);
					}
					this.started = true;

				},
				move: function(event) {

					if (this.started) {
						if(isMobile){
							context.lineTo(
								event.targetTouches[0].pageX,
								event.targetTouches[0].pageY
							);
						}else{

							context.lineTo(
								event.pageX - this.offsetLeft, 
								event.pageY - this.offsetTop
							);
						}
						context.stroke();
					}

				},
				end: function(event) {
					this.started = false;
				}
			};

			// Canvas & Context
			canvas = document.getElementById('pad');
			context = canvas.getContext('2d');

			// Full Window Size Canvas
			context.canvas.width = window.innerWidth;
			context.canvas.height = window.innerHeight;

			// Events
			canvas.addEventListener('touchstart', draw.start, false);
			canvas.addEventListener('touchend', draw.end, false);
			canvas.addEventListener('touchmove', draw.move, false);
			canvas.addEventListener('mousedown', draw.start, false);
			canvas.addEventListener('mousemove', draw.move, false);
			canvas.addEventListener('mouseup', draw.end, false);

		});		// Disable Page Move
		document.body.addEventListener('touchmove',function(event){
		  event.preventDefault();
		},false);
	}

There is also another way to create drawing board on canvas, by printing images on the mouse movement.

check out this example Click here for Demo

Advertisements

6 thoughts on “html5 simple drawing board using canvas for touch devices

  1. Hi..I tested the above program on both my laptop and my tablet. It seems to be working fine with the laptop, but in my tablet, when I try to write something on screen, nothing happens. Have you tested it for touch devices?

    • hi Niraj,

      Thanks for reading my post, I have tested on iphone as well as iPad and it’s working fine.
      Please try this Link on you touch device.

      Regards.

      • Hi, I tried this on several Android devices (phones and tablets) and it’s not working, just as Neeraj said.

  2. Hi Jignesh, I tried TEST.Html script in Asp.net MVC 4 in the View I copied the same javascript, in the Layout.cshtml I added sketcher.js and trigonometry.js and modernizr.custom.34982.js but when I excute the program I have this error “Uncaught TypeError: Object [object Object] has no method ‘touch” but when I comment $(“.box”).touch(function () { brush.src = this.src; }); I can execute the program I can draw with mouse but I can’t draw with touch. How I can resolve this problem? please help me with this error?

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 )

Google+ photo

You are commenting using your Google+ 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 )

w

Connecting to %s