acspike/gist:4315684

## gistfile1.txt
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var drawOn = function (id) {
    var lastPoint = null;
    var canvas = document.getElementById(id);
    var ctx = canvas.getContext('2d');
    ctx.lineWidth = 4;
    var offset = jQuery('#'+id).offset();

    var start = function (e) {
        lastPoint = {'x':e.pageX - offset.left, 'y':e.pageY - offset.top};
    };
    var move = function (e) {
        if (lastPoint != null) {
            var point = {'x':e.pageX - offset.left, 'y':e.pageY - offset.top};
            ctx.beginPath();
            ctx.moveTo(lastPoint.x, lastPoint.y);
            ctx.lineTo(point.x, point.y);
            ctx.stroke();
            lastPoint = point;
        }
        e.preventDefault();
    };
    var end = function (e) {
        lastPoint = null;
    };
    canvas.addEventListener('touchstart',start, false);
    canvas.addEventListener('touchmove',move, false);
    canvas.addEventListener('touchend',end, false);
    canvas.addEventListener('mousedown',start, false);
    canvas.addEventListener('mousemove',move, false);
    canvas.addEventListener('mouseup',end, false);

    var clear = function (e) {
        ctx.save();
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.restore();
    };
    return {clear: clear};
};


jQuery(document).ready(function () {
    var drawer = drawOn('signature');
    jQuery("#clear").click(drawer.clear);
});
</script>
<style type="text/css">
#signature {
    border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="signature" height="200" width="600"></canvas>
<button id="clear">Clear</button>
</body>
</html>
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script type="text/javascript">
	var drawOn = function (id) {
	var lastPoint = null;
	var canvas = document.getElementById(id);
	var ctx = canvas.getContext('2d');
	ctx.lineWidth = 4;
	var offset = jQuery('#'+id).offset();

	var start = function (e) {
	lastPoint = {'x':e.pageX - offset.left, 'y':e.pageY - offset.top};
	};
	var move = function (e) {
	if (lastPoint != null) {
	var point = {'x':e.pageX - offset.left, 'y':e.pageY - offset.top};
	ctx.beginPath();
	ctx.moveTo(lastPoint.x, lastPoint.y);
	ctx.lineTo(point.x, point.y);
	ctx.stroke();
	lastPoint = point;
	}
	e.preventDefault();
	};
	var end = function (e) {
	lastPoint = null;
	};
	canvas.addEventListener('touchstart',start, false);
	canvas.addEventListener('touchmove',move, false);
	canvas.addEventListener('touchend',end, false);
	canvas.addEventListener('mousedown',start, false);
	canvas.addEventListener('mousemove',move, false);
	canvas.addEventListener('mouseup',end, false);

	var clear = function (e) {
	ctx.save();
	ctx.setTransform(1, 0, 0, 1, 0, 0);
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	ctx.restore();
	};
	return {clear: clear};
	};


	jQuery(document).ready(function () {
	var drawer = drawOn('signature');
	jQuery("#clear").click(drawer.clear);
	});
	</script>
	<style type="text/css">
	#signature {
	border: 1px solid black;
	}
	</style>
	</head>
	<body>
	<canvas id="signature" height="200" width="600"></canvas>
	<button id="clear">Clear</button>
	</body>
	</html>