Hi,
I have a created a demo code for signature using the example from the link :-
Building a Signature Control Using Canvas[
^]
in asp .net. This example works fine on computer , but when I access the url from an Ipad the signature control does not work. Please help in this.
Below is the code :-
ASPX :-
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!doctype html>
<html>
<head>
<title>Signature</title>
<script src="signature.js" type="text/javascript"></script>
<link href="signature.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function loaded() {
var signature = new ns.SignatureControl({ containerId: 'container', callback: function () {
alert('hello');
}
});
signature.init();
}
window.addEventListener('DOMContentLoaded', loaded, false);
</script>
</head>
<body>
<div id="container">
<h1>
HI
</h1>
<asp:WebSignature id="WebSignature1" runat="server"></asp:WebSignature>
</div>
</body>
</html>
Javascript :-
(function (ns) {
"use strict";
ns.SignatureControl = function (options) {
var containerId = options && options.canvasId || "container",
callback = options && options.callback || {},
label = options && options.label || "Signature",
cWidth = options && options.width || "300px",
cHeight = options && options.height || "300px",
btnClearId,
btnAcceptId,
canvas,
ctx;
function initCotnrol() {
createControlElements();
wireButtonEvents();
canvas = document.getElementById("signatureCanvas");
canvas.addEventListener("mousedown", pointerDown, false);
canvas.addEventListener("mouseup", pointerUp, false);
ctx = canvas.getContext("2d");
}
function createControlElements() {
var signatureArea = document.createElement("div"),
labelDiv = document.createElement("div"),
canvasDiv = document.createElement("div"),
canvasElement = document.createElement("canvas"),
buttonsContainer = document.createElement("div"),
buttonClear = document.createElement("button"),
buttonAccept = document.createElement("button");
labelDiv.className = "signatureLabel";
labelDiv.textContent = label;
canvasElement.id = "signatureCanvas";
canvasElement.clientWidth = cWidth;
canvasElement.clientHeight = cHeight;
canvasElement.style.border = "solid 2px black";
buttonClear.id = "btnClear";
buttonClear.textContent = "Clear";
buttonAccept.id = "btnAccept";
buttonAccept.textContent = "Accept";
canvasDiv.appendChild(canvasElement);
buttonsContainer.appendChild(buttonClear);
buttonsContainer.appendChild(buttonAccept);
signatureArea.className = "signatureArea";
signatureArea.appendChild(labelDiv);
signatureArea.appendChild(canvasDiv);
signatureArea.appendChild(buttonsContainer);
document.getElementById(containerId).appendChild(signatureArea);
}
function pointerDown(evt) {
ctx.beginPath();
ctx.moveTo(evt.offsetX, evt.offsetY);
canvas.addEventListener("mousemove", paint, false);
}
function pointerUp(evt) {
canvas.removeEventListener("mousemove", paint);
paint(evt);
}
function paint(evt) {
ctx.lineTo(evt.offsetX, evt.offsetY);
ctx.stroke();
}
function wireButtonEvents() {
var btnClear = document.getElementById("btnClear"),
btnAccept = document.getElementById("btnAccept");
btnClear.addEventListener("click", function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}, false);
btnAccept.addEventListener("click", function () {
callback();
}, false);
}
function getSignatureImage() {
return ctx.getImageData(0, 0, canvas.width, canvas.height).data;
}
return {
init: initCotnrol,
getSignatureImage: getSignatureImage
};
}
})(this.ns = this.ns || {});
CSS :-
#signatureCanvas
{
background-color: #fff;
}
#btnClear
{
float: right;
width: 88px;
height: 32px;
border: solid 2px #cacaca;
background-color: #636363;
}
#btnAccept
{
float: left;
width: 88px;
height: 32px;
border: solid 2px #fff;
background-color: #ff6600;
}
.signatureArea
{
width: 300px;
color: #ff6600;
}
.signatureArea div
{
padding-left: 60px;
}
Thanks,
Submit an article or tip