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>
<div id="sketch">
    <canvas id="paint"></canvas>
    <br/>
    <input type="button" id="resetbtn" value="Reload" />
    <input type="button" id="convertpngbtn" value="Make PNG" />
    <input type="button" id="convertpdfbtn" value="Make PDF" />
    <img id="canvasimage" src="" />
</div>

CSS

#sketch {
    border: 3px solid gray;
    width:300px;
    height: 150px;
    position: relative;
}
#tmp_canvas {
    position: absolute;
    left: 0px;
    right: 0;
    bottom: 0;
    top: 0;
    cursor: crosshair;
}

JavaScript

(function () {

    var canvas = document.querySelector('#paint');
    var ctx = canvas.getContext('2d');


    var sketch = document.querySelector('#sketch');
    var sketch_style = getComputedStyle(sketch);
    canvas.width = 300;
    canvas.height = 150;


    // Creating a tmp canvas
    var tmp_canvas = document.createElement('canvas');
    var tmp_ctx = tmp_canvas.getContext('2d');
    tmp_canvas.id = 'tmp_canvas';
    tmp_canvas.width = canvas.width;
    tmp_canvas.height = canvas.height;

    sketch.appendChild(tmp_canvas);

    var mouse = {
        x: 0,
        y: 0
    };
    var last_mouse = {
        x: 0,
        y: 0
    };

    // Pencil Points
    var ppts = [];

    /* Mouse Capturing Work */
    tmp_canvas.addEventListener('mousemove', function (e) {
        mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
        mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
    }, false);



    tmp_ctx.lineWidth = 3;
    tmp_ctx.lineJoin = 'round';
    tmp_ctx.lineCap = 'round';
    tmp_ctx.strokeStyle = 'blue';
    tmp_ctx.fillStyle = 'blue';


    tmp_canvas.addEventListener('mousedown', function (e) {
        tmp_canvas.addEventListener('mousemove', onPaint, false);

        mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
        mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;

        ppts.push({
            x: mouse.x,
            y: mouse.y
        });

        onPaint();
    }, false);

    tmp_canvas.addEventListener('mouseup', function () {
        tmp_canvas.removeEventListener('mousemove', onPaint, false);

        // Writing down to real canvas now
        ctx.drawImage(tmp_canvas, 0, 0);
        // Clearing tmp canvas
        tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);

        // Emptying up Pencil Points
        ppts = [];
    }, false);

    var onPaint = function () {

        // Saving all the points in an array
        ppts.push({
            x:...