jsketch/dist/jsketch.min.js

!function(a){function b(a,b){if(!a)throw new Error("Sketchable requires a DOM element.");return"string"==typeof a&&(a=document.querySelector(a)),this.setContext(a),this.stageWidth=a.width,this.stageHeight=a.height,this.data=b,this.callStack=[],this.setDefaults()}b.prototype={setContext:function(a){if(!a)throw new Error("No canvas element specified.");return this.canvas=a,this.context=a.getContext("2d"),this},setDefaults:function(){return this.saveGraphics({fillStyle:this.data.fillStyle||"#F00",strokeStyle:this.data.strokeStyle||"#F0F",lineWidth:this.data.lineWidth||2,lineCap:this.data.lineCap||"round",lineJoin:this.data.lineJoin||"round",miterLimit:this.data.miterLimit||10}).restoreGraphics()},size:function(a,b){return this.stageWidth=a,this.stageHeight=b,this.canvas.width=a,this.canvas.height=b,this.restoreGraphics(),this},background:function(a){var b=[0,0,this.stageWidth,this.stageHeight];return this.beginFill(a),this.context.fillRect.apply(this.context,b),this.endFill(),this.callStack.push({property:"fillStyle",value:a}),this.callStack.push({method:"fillRect",args:b}),this},stage:function(a,b,c){return this.size(a,b).background(c),this},beginFill:function(a){return this.saveGraphics(),this.context.fillStyle=a,this.callStack.push({property:"fillStyle",value:a}),this},endFill:function(){return this.restoreGraphics(),this},lineStyle:function(a,b,c,d,e){return this.saveGraphics({strokeStyle:a||this.data.strokeStyle,lineWidth:b||this.data.lineWidth,lineCap:c||this.data.lineCap,lineJoin:d||this.data.lineJoin,miterLimit:e||this.data.miterLimit}).restoreGraphics()},moveTo:function(a,b){var c=[].slice.call(arguments);return this.context.moveTo.apply(this.context,c),this.callStack.push({method:"moveTo",args:c}),this},lineTo:function(a,b){var c=[].slice.call(arguments);return this.context.lineTo.apply(this.context,c),this.callStack.push({method:"lineTo",args:c}),this},line:function(a,b,c,d){return this.moveTo(a,b),this.lineTo(c,d),this},curveTo:function(a,b,c,d){var e=[c,d,a,b];return this.context.quadraticCurveTo.apply(this.context,e),this.callStack.push({method:"quadraticCurveTo",args:e}),this},curve:function(a,b,c,d,e,f){return this.moveTo(a,b),this.curveTo(c,d,e,f),this},stroke:function(){return this.context.stroke(),this},strokeRect:function(a,b,c,d){var e=[].slice.call(arguments);return this.context.beginPath(),this.context.strokeRect.apply(this.context,e),this.context.closePath(),this.callStack.push({method:"strokeRect",args:e}),this},fillRect:function(a,b,c,d){var e=[].slice.call(arguments);return this.context.beginPath(),this.context.fillRect.apply(this.context,e),this.context.closePath(),this.callStack.push({method:"fillRect",args:e}),this},rect:function(a,b,c,d){var e=[].slice.call(arguments);return this.context.beginPath(),this.context.fillRect.apply(this.context,e),this.context.strokeRect.apply(this.context,e),this.context.closePath(),this.callStack.push({method:"fillRect",args:e}),this.callStack.push({method:"strokeRect",args:e}),this},strokeCircle:function(a,b,c){var d=[a,b,c,0,2*Math.PI,!1];return this.context.beginPath(),this.context.arc.apply(this.context,d),this.context.stroke(),this.context.closePath(),this.callStack.push({method:"strokeCircle",args:d}),this},fillCircle:function(a,b,c){var d=[a,b,c,0,2*Math.PI,!1];return this.context.beginPath(),this.context.arc.apply(this.context,d),this.context.fill(),this.context.closePath(),this.callStack.push({method:"fillCircle",args:d}),this},circle:function(a,b,c){var d=[a,b,c,0,2*Math.PI,!1];return this.context.beginPath(),this.context.arc.apply(this.context,d),this.context.fill(),this.context.stroke(),this.context.closePath(),this.callStack.push({method:"fillCircle",args:d}),this.callStack.push({method:"strokeCircle",args:d}),this},radialCircle:function(a,b,c,d,e){("undefined"==typeof d||0>d)&&(d=1);var f=this.context.createRadialGradient(a,b,c,a,b,d);e&&"array"===e.constructor.name.toLowerCase()||(e=[this.context.fillStyle,"white"]);for(var g=0;g<e.length;g++){var h=e[g];f.addColorStop(g,h)}return this.beginFill(f).fillCircle(a,b,c).endFill(),this},beginPath:function(){return this.saveGraphics(),this.context.beginPath(),this.callStack.push({method:"beginPath"}),this},closePath:function(){return this.context.closePath(),this.callStack.push({method:"closePath"}),this.restoreGraphics(),this},eraser:function(){return this.context.globalCompositeOperation="destination-out",this.callStack.push({property:"comp-op",value:"dst_out"}),this},pencil:function(){return this.context.globalCompositeOperation="source-over",this.callStack.push({property:"comp-op",value:"src_over"}),this},clear:function(){var a=[0,0,this.stageWidth,this.stageHeight];return this.context.clearRect.apply(this.context,a),this.callStack.push({method:"fillRect",args:a}),this},save:function(){return this.context.save(),this.callStack.push({method:"save"}),this},restore:function(){return this.context.restore(),this.callStack.push({method:"restore"}),this},saveGraphics:function(a){for(var b in a)this.data[b]=a[b];return this},restoreGraphics:function(){var a="fillStyle strokeStyle lineWidth lineCap lineJoin miterLimit".split(" ");for(var b in this.data)this.context[b]=this.data[b],a.indexOf(b)>-1&&this.callStack.push({property:b,value:this.data[b]});return this},drawImage:function(a,b,c){"undefined"==typeof b&&(b=0),"undefined"==typeof c&&(c=0);var d=this,e=new Image;return e.src=a,e.onload=function(){d.context.drawImage(e,b,c),d.callStack.push({method:"drawImage",args:[e,b,c]}),d.callStack.push({method:"removeAsync"})},e.onerror=function(){d.callStack.push({method:"removeAsync"})},d.callStack.push({method:"addAsync"}),this}},a.jSketch=b}(this);