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

About these ads
About

hi there, I am software engineer, working in e-commerce company and passionate about all thing digital. On this blog, I share my experiments with different technology.

Tagged with: , , ,
Posted in html, JavaScript
6 comments on “html5 simple drawing board using canvas for touch devices
  1. Neeraj says:

    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?

    • jignesh2882 says:

      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.

      • Nikola says:

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

  2. melody says:

    hi, I just tried the demo link on my tablet, it’s not working as well

  3. Ricardo says:

    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 )

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

What people say about post?
Rose on Awesome wordpress ecommerce…

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 34 other followers

Follow

Get every new post delivered to your Inbox.

Join 34 other followers

%d bloggers like this: