91 lines
2.5 KiB
JavaScript
91 lines
2.5 KiB
JavaScript
//User Variables
|
|
var canvasWidth = 400; //canvas width
|
|
var canvasHeight = 60; //canvas height
|
|
var canvas = document.getElementById('canvas'); //canvas element
|
|
var context = canvas.getContext("2d"); //context element
|
|
var clickX = new Array();
|
|
var clickY = new Array();
|
|
var clickDrag = new Array();
|
|
var paint;
|
|
|
|
canvas.addEventListener("mousedown", mouseDown, false);
|
|
canvas.addEventListener("mousemove", mouseXY, false);
|
|
document.body.addEventListener("mouseup", mouseUp, false);
|
|
|
|
//For mobile
|
|
canvas.addEventListener("touchstart", mouseDown, false);
|
|
canvas.addEventListener("touchmove", mouseXY, true);
|
|
canvas.addEventListener("touchend", mouseUp, false);
|
|
document.body.addEventListener("touchcancel", mouseUp, false);
|
|
|
|
function draw() {
|
|
context.clearRect(0, 0, canvas.width, canvas.height); // Clears the canvas
|
|
|
|
context.strokeStyle = "#000000"; //set the "ink" color
|
|
context.lineJoin = "miter"; //line join
|
|
context.lineWidth = 2; //"ink" width
|
|
|
|
for (var i = 0; i < clickX.length; i++) {
|
|
context.beginPath(); //create a path
|
|
if (clickDrag[i] && i) {
|
|
context.moveTo(clickX[i - 1], clickY[i - 1]); //move to
|
|
} else {
|
|
context.moveTo(clickX[i] - 1, clickY[i]); //move to
|
|
}
|
|
context.lineTo(clickX[i], clickY[i]); //draw a line
|
|
context.stroke(); //filled with "ink"
|
|
context.closePath(); //close path
|
|
}
|
|
}
|
|
|
|
//Save the Sig
|
|
$("#saveSig").click(function saveSig() {
|
|
var sigData = canvas.toDataURL("image/png");
|
|
$("#signature_pad").val(sigData);
|
|
|
|
$("#application_signature_save").fadeIn("slow") ;
|
|
setTimeout(function () {
|
|
$("#application_signature_save").fadeOut("slow") ;
|
|
}, 2000) ;
|
|
|
|
return false ;
|
|
});
|
|
|
|
//Clear the Sig
|
|
$('#clearSig').click(
|
|
function clearSig() {
|
|
clickX = new Array();
|
|
clickY = new Array();
|
|
clickDrag = new Array();
|
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
|
$("#signature_pad").html('');
|
|
|
|
return false ;
|
|
});
|
|
|
|
function addClick(x, y, dragging) {
|
|
clickX.push(x);
|
|
clickY.push(y);
|
|
clickDrag.push(dragging);
|
|
}
|
|
|
|
function mouseXY(e) {
|
|
if (paint) {
|
|
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
|
|
draw();
|
|
}
|
|
}
|
|
|
|
function mouseUp() {
|
|
paint = false;
|
|
}
|
|
|
|
function mouseDown(e)
|
|
{
|
|
var mouseX = e.pageX - this.offsetLeft;
|
|
var mouseY = e.pageY - this.offsetTop;
|
|
|
|
paint = true;
|
|
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
|
|
draw();
|
|
} |