Introduction
I've seen quite a few HTML5 canvas painting examples, but I had not seen one that worked on both a touch screen, and on a normal desktop with a mouse. This is just a very basic example of what is needed to get this feature working on both.
Background
Some time back I had to develop an HTML5 customer input form which also included a signature. This would be used mostly on a tablet, however it was possible it needed to be supported on a drawing pad and a desktop PC. I viewed quite a few online examples of painting on the canvas, but none worked on touch screens AND desktops:
http://mudcu.be/sketchpad/
http://devfiles.myopera.com/articles/649/example5.html
This is simply an alternate to Gordon Kushner's article on the HTML5 canvas & painting. His article can be found here: http://www.codeproject.com/Articles/351253/HTML-5-Canvas-A-Simple-Paint-Program. His code works well; though again it does not work on a touch device.
Most of the code here I found from various examples on Code Project and Stack Overflow. I simply put them all together to get this demo working.
Using the code
This code simply determines which device type you are using and sets up the canvas event handlers accordingly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Desktops and Tablets</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
initialize();
});
function getPosition(mouseEvent, sigCanvas) {
var x, y;
if (mouseEvent.pageX != undefined && mouseEvent.pageY != undefined) {
x = mouseEvent.pageX;
y = mouseEvent.pageY;
} else {
x = mouseEvent.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = mouseEvent.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
return { X: x - sigCanvas.offsetLeft, Y: y - sigCanvas.offsetTop };
}
function initialize() {
var sigCanvas = document.getElementById("canvasSignature");
var context = sigCanvas.getContext("2d");
context.strokeStyle = 'Black';
var is_touch_device = 'ontouchstart' in document.documentElement;
if (is_touch_device) {
var drawer = {
isDrawing: false,
touchstart: function (coors) {
context.beginPath();
context.moveTo(coors.x, coors.y);
this.isDrawing = true;
},
touchmove: function (coors) {
if (this.isDrawing) {
context.lineTo(coors.x, coors.y);
context.stroke();
}
},
touchend: function (coors) {
if (this.isDrawing) {
this.touchmove(coors);
this.isDrawing = false;
}
}
};
function draw(event) {
var coors = {
x: event.targetTouches[0].pageX,
y: event.targetTouches[0].pageY
};
var obj = sigCanvas;
if (obj.offsetParent) {
do {
coors.x -= obj.offsetLeft;
coors.y -= obj.offsetTop;
}
while ((obj = obj.offsetParent) != null);
}
drawer[event.type](coors);
}
sigCanvas.addEventListener('touchstart', draw, false);
sigCanvas.addEventListener('touchmove', draw, false);
sigCanvas.addEventListener('touchend', draw, false);
sigCanvas.addEventListener('touchmove', function (event) {
event.preventDefault();
}, false);
}
else {
$("#canvasSignature").mousedown(function (mouseEvent) {
var position = getPosition(mouseEvent, sigCanvas);
context.moveTo(position.X, position.Y);
context.beginPath();
$(this).mousemove(function (mouseEvent) {
drawLine(mouseEvent, sigCanvas, context);
}).mouseup(function (mouseEvent) {
finishDrawing(mouseEvent, sigCanvas, context);
}).mouseout(function (mouseEvent) {
finishDrawing(mouseEvent, sigCanvas, context);
});
});
}
}
function drawLine(mouseEvent, sigCanvas, context) {
var position = getPosition(mouseEvent, sigCanvas);
context.lineTo(position.X, position.Y);
context.stroke();
}
function finishDrawing(mouseEvent, sigCanvas, context) {
drawLine(mouseEvent, sigCanvas, context);
context.closePath();
$(sigCanvas).unbind("mousemove")
.unbind("mouseup")
.unbind("mouseout");
}
</script>
</head>
<body>
<h1>Canvas test</h1>
<div id="canvasDiv">
<!--
<canvas id="canvasSignature" width="500px" height="500px" style="border:2px solid #000000;"></canvas>
</div>
</body>
</html>