Draw signature canvas and save as PDF
HTML
<script src="http://f.cl.ly/items/3S081X0d1M15213R030g/base64.js"></script>
<script src="http://f.cl.ly/items/0143062g093g2Y0f362M/canvas2image.js"></script>
<script src="http://me.eae.net/projects/iecanvas/iecanvas.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.js"></script>
<h1>Draw your signature here</h1>
<div id="main-wrapper">fffffff
<canvas width="300" height="125" style="border:1px solid black;" id="thecanvas"></canvas>
<img id="canvasimage" src="" />
<br/>
<input type="button" id="resetbtn" value="Reload" />
<input type="button" id="convertpngbtn" value="Make PNG" />
<input type="button" id="convertpdfbtn" value="Make PDF" />
</div>
CSS
h1 {
font-size:x-large;
}
JavaScript
var bMouseIsDown = false;
var cbCanvas = document.getElementById("thecanvas");
var cbCtx = cbCanvas.getContext("2d");
var iWidth = cbCanvas.width;
var iHeight = cbCanvas.height;
cbCtx.fillStyle = "rgb(255, 255, 255)";
cbCtx.fillRect(0, 0, iWidth, iHeight);
cbCtx.beginPath();
cbCtx.strokeStyle = "rgb(255,0,0)";
cbCtx.strokeWidth = "3px";
var img = new Image();
img.onload = function () {
cbCtx.drawImage(img, 0, 0);
};
cbCanvas.onmousedown = function (e) {
bMouseIsDown = true;
iLastX = e.clientX - cbCanvas.offsetLeft + (window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft);
iLastY = e.clientY - cbCanvas.offsetTop + (window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop);
};
cbCanvas.onmouseup = function () {
bMouseIsDown = false;
iLastX = -1;
iLastY = -1;
};
cbCanvas.onmousemove = function (e) {
if (bMouseIsDown) {
var iX = e.clientX - cbCanvas.offsetLeft + (window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft);
var iY = e.clientY - cbCanvas.offsetTop + (window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop);
cbCtx.moveTo(iLastX, iLastY);
cbCtx.lineTo(iX, iY);
cbCtx.stroke();
iLastX = iX;
iLastY = iY;
}
};
function convertCanvas(strType) {
var cbImg;
if (strType === "PNG") cbImg = Canvas2Image.saveAsPNG(cbCanvas, true, 300, 125);
if (!cbImg) {
console.log("Sorry, this browser is not capable of saving " + strType + " files!");
return false;
}
cbImg.id = "canvasimage";
cbImg.style.border = cbCanvas.style.border;
if (document.getElementById("canvasimage")) {
var cbOldImg = document.getElementById("canvasimage");
cbCanvas.parentNode.replaceChild(cbImg, cbOldImg);
} else {
cbCanvas.parentNode.appendChild(cbImg);
}
}
function convertToPdf(strType) {
if (strType ===...