Recently, I was assigned with a problem of implementing the cross browser signature functionality. Since there was a need to support some of the major browsers (IE, Safari, FF, Chrome, Opera) and different platforms, there was a need to identify any one feature that works on all browsers. Based on a lead given, I started looking at the canvas feature of HTML5.
But very soon realized Canvas is not supported in IE (or until IE version 8), but soon learnt it will be supported from IE9. Also there are libraries available like “Excanvas” with which the Canvas feature can be supported in earlier versions of IE, except for few limitations.
The signature pad is similar to a drawing board where we can scribble; hence the example below is a drawing application. The languages used are html5 and JavaScript. For the most part the code is self-explanatory and commented at places.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Canvas Drawing Boardtitle>
<style type="text/css">
.canvasborder {border: 2px solid black;}
style>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js">script>
<script type="text/javascript">
var DrawingBlock = function (element) {
var DrawCanvas = document.getElementById(element); //
var DrawContext = DrawCanvas.getContext('2d');
DrawCanvas.down = false;
//Event is triggered when mouse button is pressed down on canvas
DrawCanvas.onmousedown = function (event) {
var pos = getMousePositionInElement(this, event); //retrieve the mouse position on canvas
DrawContext.beginPath();
DrawContext.moveTo(pos.x, pos.y);
DrawContext.lineTo(pos.x + 0.5, pos.y + 0.5); //put a dot, at the point of mouse down.
DrawCanvas.down = true; // true until the mouse button is pressed down.
}
//Event is triggered when pressed mouse button is released when on canvas
DrawCanvas.onmouseup = function (event) {
if (this.down) {
var pos = getMousePositionInElement(this, event);
DrawContext.lineTo(pos.x, pos.y);
DrawContext.closePath();
DrawContext.stroke();
this.down = false;
}
}
//Event is triggered when mouse is moved over canvas.
DrawCanvas.onmousemove = function (event) {
if (this.down) { //only if mouse button is held down
var pos = getMousePositionInElement(this, event);
DrawContext.lineTo(pos.x, pos.y);
DrawContext.closePath();
DrawContext.stroke();
DrawContext.beginPath();
DrawContext.moveTo(pos.x, pos.y)
}
}
//Return the canvas position on the document.
var getCanvasElementPosition = function (element) {
//Top left corner of the canvas is used as the
//reference to calculate the mouse position
var posX = element.offsetLeft;
var posY = element.offsetTop;
var canvasPos = new Array(0);
canvasPos['x'] = posX;
canvasPos['y'] = posY;
return canvasPos;
}
//Retrieve the mouse position on canvas
var getMousePositionInElement = function (element, event) {
var elementPosition = getCanvasElementPosition(element); //canvas position on the page
var mousePosition = getMousePosition(event); //mouse cordinates on the page.
var x = mousePosition.x - elementPosition.x;
var y = mousePosition.y - elementPosition.y;
var position = new Array(); //mouse position w.r.t canvas
position['x'] = x;
position['y'] = y;
return position;
}
//Retrieve the mouse co-ordinates in the document (web page)
var getMousePosition = function (event) {
var x = event.pageX;
var y = event.pageY;
var mouseposition = new Array();
mouseposition['x'] = x;
mouseposition['y'] = y;
return mouseposition;
}
//tracking the mouse-up event outside canvas (drawing board).
this.setMouseUpButton = function () {
DrawCanvas.down = false;
}
DrawCanvas.onselectstart = function () {
return false;
}
}
var drawingImage;
window.onload = function init() {
drawingImage = new DrawingBlock("DrawingCanvas"); //initialize the canvas element
}
//Event is triggered with mouse button is released in the document (web page).
$(document).mouseup(function (e) {
drawingImage.setMouseUpButton();
});
script>
head>
<body>
<tr>
<canvas id="DrawingCanvas" width="500" height="500" class="canvasborder">canvas>
tr>
<tr>
<td class="bold text">Drawing Boardtd>
tr>
body>
html>
The above code is tested in browsers like, IE 9 (Release Candidate), Safari, Firefox, Chrome and Opera on Windows and Mac platforms.
1 comment:
I really like this example, you should also do give SuperSignature a try.
It is a online signature pad that works on website and mobile browsers.
Supports major devices, it is actively developed and backed with strong support :)
Post a Comment