Drawing board/Scribbling Pad for Tablet PC’s and smart phones

My previous post on developing Drawing Board/ Scribbling pad with HTML5 Canvas, works only on browsers supporting HTML5 canvas and drawn with a mouse or a stylus. But with a growth in usage of the touch screen devices like the tablet PC’s and smart phones, it makes more sense when we are able to scribble with our hand.

The example in my previous post can be extended to support touch-screen devices by adding the touch events, similar to the existing mouse events. In this post we look into touch events.

The touch events are ‘ontouchstart’, ‘ontouchmove’ and ‘ontouchend’.

‘OnTouchStart’ Event:-

sigCanvas.ontouchstart = function (event) {
event.preventDefault(); // to get rid of the default touch screen scroll action
var sigContext = this.getContext('2d');
var pos = getTouchPositionInElement(this, event); //get touch position on to canvas
sigContext.beginPath();
sigContext.moveTo(pos.x, pos.y);
sigContext.lineTo(pos.x + 0.5, pos.y + 0.5); //puts a dot on screen
sigContext.stroke();
this.down = true;
}

‘OnTouchMove’ Event:-

sigCanvas.ontouchmove = function (event) {
event.preventDefault(); //to get rid of the default touch screen scroll action
if (this.down) {
var sigContext = sigCanvas.getContext('2d');
var pos = getTouchPositionInElement(this, event);
sigContext.lineTo(pos.x, pos.y);
sigContext.closePath();
sigContext.stroke();
sigContext.beginPath();
sigContext.moveTo(pos.x, pos.y)
}
}

‘OnTouchEnd’ Event:-

sigCanvas.onTouchEnd = function (event) {
event.preventDefault(); //to get rid of the default touch screen scroll action
if (this.down) {
var sigContext = sigCanvas.getContext('2d');
var pos = getTouchPositionInElement(this, event);
sigContext.lineTo(pos.x, pos.y);
sigContext.closePath();
sigContext.stroke();
this.down = false;
}
}

Determine the Touch position on the canvas:-

var getTouchPositionInElement = function (element, e) {
var elementPosition = getElementPosition(element); //get canvas position on screen
var touchPosition= getTouchPosition(e); //get touch position on screen
var x = touchPosition.x - elementPosition.x;
var y = touchPosition.y - elementPosition.y;
var position = new Array();
position['x'] = x;
position['y'] = y;
return position; //touch position relative to canvas
}


Determine the canvas position on the screen:-

var getElementPosition = function (element) {
var posX = element.offsetLeft;
var posY = element.offsetTop;
try {
while (element.offsetParent) {
posX += element.offsetParent.offsetLeft;
posY += element.offsetParent.offsetTop;
if (element == document.getElementsByTagName('body')[0]) {
break
}
else {
element = element.offsetParent;
}
}
}
catch (e) {
}
var dims = new Array(0);
dims['x'] = posX;
dims['y'] = posY;
return dims; //return the top left position (co-ordinates) of canvas
}

Determine the touch position on the screen:-

var getTouchPosition = function (e) {
var touch = e.changedTouches[0]; //retrieves figure touch co-ordinates on screen
var touchPosition = new Array();
touchPosition['x'] = touch.pageX;
touchPosition['y'] = touch.pageY;
return touchPosition;
}



When the final application (with both mouse and touch events) is accessed through a mouse/ stylus the ‘mouse events’ are triggered and when accessed on a touch screen device triggers the ‘touch events’.