jsketch/dist/jsketch.min.js

!function(a){function b(a,b){if(!a)throw new Error("Sketchable requires a DOM element or selector.");return"string"==typeof a&&(a=document.querySelector(a)),this.setContext(a),this.stageWidth=a.offsetWidth,this.stageHeight=a.offsetHeight,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(){var a={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};for(var b in a){var c=a[b];this.callStack.push({property:b,value:c})}return this.saveGraphics(a).restoreGraphics()},size:function(a,b){var c=parseFloat(a),d=parseFloat(b);return this.stageWidth=c,this.stageHeight=d,this.canvas.width=c,this.canvas.height=d,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({fillStyle:a}),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){var f={strokeStyle:a,lineWidth:b,lineCap:c,lineJoin:d,miterLimit:e};return this.saveGraphics(f).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.callStack.push({method:"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.fillRect.apply(this,e),this.strokeRect.apply(this,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=[].slice.call(arguments);return this.fillCircle.apply(this,d),this.strokeCircle.apply(this,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.context.beginPath(),this.callStack.push({method:"beginPath"}),this},closePath:function(){return this.context.closePath(),this.callStack.push({method:"closePath"}),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:"clear"}),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){var c=a[b];c&&c!==this.data[b]&&(this.data[b]=c,this.callStack.push({property:b,value:c}))}return this},restoreGraphics:function(){for(var a in this.data)this.context[a]=this.data[a];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);