IPad/IPhone/Android Document Signature Pad

I have designed this for making the signature on documents. I have simply used Canvas, JSON, Javascript and ASP.Net 3.5 with C#.

What is Canvas?

The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).

The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.

Create a Canvas

A canvas is a rectangular area on an HTML page, and it is specified with the <canvas> element.

<canvas id="myCanvas" width="200" height="100"></canvas>

Draw Onto The Canvas With JavaScript

<script type="text/javascript">

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.fillStyle = "#FF0000";

ctx.fillRect(0, 0, 150, 75);

</script>

For more help on canvas, Visit....
http://www.w3schools.com/html5/html5_canvas.asp

JSON

JSON (JavaScript Object Notation) is an independent data exchange format. JSON is limited to text and numeric values. Binary values are not supported.

JSON is a subset of the JavaScript Specification (ECME-Script) and it is therefore directly supported in JavaScript.

Data structures in JSON are based on key / value pairs. The key is a string, the value can be a numerical value, a boolean value (true or false) or an object.

An JSON object is a set of key / value pairs which starts with "{" and ends with "}".

<script type="text/javascript">

function btnUpdate_onclick()

{

var SigName = document.getElementById('<%=txtSigName.ClientID%>').value;

var image = document.getElementById("canvasSignature").toDataURL("image/png");

image = image.replace('data:image/png;base64,', '');

//alert(SigName);

$.ajax(

{

type: 'POST',

url: "SaveCanvas.aspx/UpdateImage",

data: '{ "imageData" : "' + image + '" }',

//data: '{"SignName":"' + SigName + '"}',

contentType: 'application/json; charset=utf-8',

dataType: 'json',

success: function (msg)

{

clearCanvas();

bodyOnLoad();

greet();

}

});

}

</script>