motdotla/index.html

## index.html
<html>
<head>
  <title>Web Root</title>
</head>
<body>
  <canvas id="sign"></canvas>
</body>
</html>

## script.js
/*! signature-mark.js - 0.0.1 - 2014-10-12 - scottmotte */
!function(a){var b=function(a){return this instanceof b?(this.canvas=a,this.init(),this):new b(a)};b.prototype.init=function(){this.initVariables(),this.initPainters(),this.initEvents()},a.SignatureMark=b}(this),function(a){a.prototype.initEvents=function(){var a=this;a.canvas.addEventListener(a.mouse_down,function(b){a.onCanvasMouseDown(a,b)},!1),a.canvas.addEventListener(a.mouse_move,function(b){a.onCanvasMouseMove(a,b)},!1),a.canvas.addEventListener("contextmenu",function(b){a.preventRightClick(a,b)},!1),document.addEventListener(a.mouse_up,function(b){a.onCanvasMouseUp(a,b)},!1),a.canvas.addEventListener(a.mouse_up,function(b){a.onCanvasMouseUp(a,b)},!1)},a.prototype.preventRightClick=function(a,b){b.preventDefault()},a.prototype.onCanvasMouseDown=function(a,b){b.preventDefault(),a.setCanvasOffset(a),a.startDrawingStroke(a),a.setMouseXAndMouseY(a,b),a.setPainters(a)},a.prototype.onCanvasMouseMove=function(a,b){b.preventDefault(),a.setMouseXAndMouseY(a,b)},a.prototype.onCanvasMouseUp=function(a){a.stopDrawingStroke(a)},a.prototype.setMouseXAndMouseY=function(a,b){a.touch_supported?(target=b.touches[0],a.mouseX=target.pageX-a.canvasOffsetLeft,a.mouseY=target.pageY-a.canvasOffsetTop):(a.mouseX=b.pageX-a.canvasOffsetLeft,a.mouseY=b.pageY-a.canvasOffsetTop)},a.prototype.setCanvasOffset=function(a){canvasOffset=a.Offset(a.canvas),a.canvasOffsetLeft=canvasOffset.left,a.canvasOffsetTop=canvasOffset.top}}(SignatureMark),function(a){a.prototype.Offset=function(a){if(void 0===a)return null;var b=a.getBoundingClientRect();return{left:b.left+window.pageXOffset,top:b.top+window.pageYOffset}}}(SignatureMark),function(a){a.prototype.initPainters=function(){this.painters=[];for(var a=0;a<this.max_strokes;a++){var b=.05*Math.random()+this.easing;this.painters.push({dx:0,dy:0,ax:0,ay:0,div:.1,ease:b})}},a.prototype.setPainters=function(a){for(var b=0;b<a.painters.length;b++)pntr=a.painters[b],pntr.dx=a.mouseX,pntr.dy=a.mouseY}}(SignatureMark),function(a){a.prototype.drawStroke=function(a){var b;for(b=0;b<a.painters.length;b++){a.context.beginPath(),pntr=a.painters[b],a.context.moveTo(pntr.dx,pntr.dy);var c=pntr.ax=(pntr.ax+(pntr.dx-a.mouseX)*pntr.div)*pntr.ease;pntr.dx-=c;var d=pntr.dx,e=pntr.ay=(pntr.ay+(pntr.dy-a.mouseY)*pntr.div)*pntr.ease;pntr.dy-=e;var f=pntr.dy;a.context.lineTo(d,f),a.context.stroke()}},a.prototype.startDrawingStroke=function(a){var b=setInterval(function(){a.drawStroke(a)},a.refresh_rate);a.strokeIntervals.push(b)},a.prototype.stopDrawingStroke=function(a){for(var b=0;b<a.strokeIntervals.length;b++)clearInterval(a.strokeIntervals[b])}}(SignatureMark),function(a){a.prototype.initVariables=function(){this.touch_supported="ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch?!0:!1,this.context=this.canvas.getContext("2d"),this.color=[0,0,0],this.brush_pressure=.5,this.context.strokeStyle="rgba("+this.color[0]+", "+this.color[1]+", "+this.color[2]+", "+this.brush_pressure+")",this.context.lineWidth=2.5,this.painters=[],this.mouseX=0,this.mouseY=0,this.strokeIntervals=[],this.refresh_rate=5,this.max_strokes=12,this.easing=.7,this.mouse_down="mousedown",this.mouse_move="mousemove",this.mouse_up="mouseup",this.touch_supported?(this.mouse_down="touchstart",this.mouse_move="touchmove",this.mouse_up="touchend"):(this.refresh_rate=10,this.max_strokes=100)}}(SignatureMark);

var sign_canvas = document.getElementById("sign");
sign_canvas.width  = 600;
sign_canvas.height = 230;

SignatureMark(sign_canvas);

## style.css
canvas {
  border: 1px solid red;
}

## yxcah.markdown

      
    Raw
  

              yxcah.markdown
            
          
    yxcah

A Pen by A Non Ymous on CodePen.
License.
	<html>
	<head>
	<title>Web Root</title>
	</head>
	<body>
	<canvas id="sign"></canvas>
	</body>
	</html>
	/! signature-mark.js - 0.0.1 - 2014-10-12 - scottmotte /
	!function(a){var b=function(a){return this instanceof b?(this.canvas=a,this.init(),this):new b(a)};b.prototype.init=function(){this.initVariables(),this.initPainters(),this.initEvents()},a.SignatureMark=b}(this),function(a){a.prototype.initEvents=function(){var a=this;a.canvas.addEventListener(a.mouse_down,function(b){a.onCanvasMouseDown(a,b)},!1),a.canvas.addEventListener(a.mouse_move,function(b){a.onCanvasMouseMove(a,b)},!1),a.canvas.addEventListener("contextmenu",function(b){a.preventRightClick(a,b)},!1),document.addEventListener(a.mouse_up,function(b){a.onCanvasMouseUp(a,b)},!1),a.canvas.addEventListener(a.mouse_up,function(b){a.onCanvasMouseUp(a,b)},!1)},a.prototype.preventRightClick=function(a,b){b.preventDefault()},a.prototype.onCanvasMouseDown=function(a,b){b.preventDefault(),a.setCanvasOffset(a),a.startDrawingStroke(a),a.setMouseXAndMouseY(a,b),a.setPainters(a)},a.prototype.onCanvasMouseMove=function(a,b){b.preventDefault(),a.setMouseXAndMouseY(a,b)},a.prototype.onCanvasMouseUp=function(a){a.stopDrawingStroke(a)},a.prototype.setMouseXAndMouseY=function(a,b){a.touch_supported?(target=b.touches[0],a.mouseX=target.pageX-a.canvasOffsetLeft,a.mouseY=target.pageY-a.canvasOffsetTop):(a.mouseX=b.pageX-a.canvasOffsetLeft,a.mouseY=b.pageY-a.canvasOffsetTop)},a.prototype.setCanvasOffset=function(a){canvasOffset=a.Offset(a.canvas),a.canvasOffsetLeft=canvasOffset.left,a.canvasOffsetTop=canvasOffset.top}}(SignatureMark),function(a){a.prototype.Offset=function(a){if(void 0===a)return null;var b=a.getBoundingClientRect();return{left:b.left+window.pageXOffset,top:b.top+window.pageYOffset}}}(SignatureMark),function(a){a.prototype.initPainters=function(){this.painters=[];for(var a=0;a<this.max_strokes;a++){var b=.05Math.random()+this.easing;this.painters.push({dx:0,dy:0,ax:0,ay:0,div:.1,ease:b})}},a.prototype.setPainters=function(a){for(var b=0;b<a.painters.length;b++)pntr=a.painters[b],pntr.dx=a.mouseX,pntr.dy=a.mouseY}}(SignatureMark),function(a){a.prototype.drawStroke=function(a){var b;for(b=0;b<a.painters.length;b++){a.context.beginPath(),pntr=a.painters[b],a.context.moveTo(pntr.dx,pntr.dy);var c=pntr.ax=(pntr.ax+(pntr.dx-a.mouseX)pntr.div)pntr.ease;pntr.dx-=c;var d=pntr.dx,e=pntr.ay=(pntr.ay+(pntr.dy-a.mouseY)pntr.div)*pntr.ease;pntr.dy-=e;var f=pntr.dy;a.context.lineTo(d,f),a.context.stroke()}},a.prototype.startDrawingStroke=function(a){var b=setInterval(function(){a.drawStroke(a)},a.refresh_rate);a.strokeIntervals.push(b)},a.prototype.stopDrawingStroke=function(a){for(var b=0;b<a.strokeIntervals.length;b++)clearInterval(a.strokeIntervals[b])}}(SignatureMark),function(a){a.prototype.initVariables=function(){this.touch_supported="ontouchstart"in window\|\|window.DocumentTouch&&document instanceof DocumentTouch?!0:!1,this.context=this.canvas.getContext("2d"),this.color=[0,0,0],this.brush_pressure=.5,this.context.strokeStyle="rgba("+this.color[0]+", "+this.color[1]+", "+this.color[2]+", "+this.brush_pressure+")",this.context.lineWidth=2.5,this.painters=[],this.mouseX=0,this.mouseY=0,this.strokeIntervals=[],this.refresh_rate=5,this.max_strokes=12,this.easing=.7,this.mouse_down="mousedown",this.mouse_move="mousemove",this.mouse_up="mouseup",this.touch_supported?(this.mouse_down="touchstart",this.mouse_move="touchmove",this.mouse_up="touchend"):(this.refresh_rate=10,this.max_strokes=100)}}(SignatureMark);

	var sign_canvas = document.getElementById("sign");
	sign_canvas.width = 600;
	sign_canvas.height = 230;

	SignatureMark(sign_canvas);