jsketch/jsketch.min.js

(function(window){var jSketch=function(elem,options){return new Sketch(elem,options)};var Sketch=function(elem,options){if(!elem)return;this.context(elem);this.stageWidth=elem.width;this.stageHeight=elem.height;this.data={};this.drawingDefaults(options);return this};jSketch.fn=Sketch.prototype={context:function(elem){if(elem===null)throw"No canvas element specified.";this.canvas=elem;this.graphics=elem.getContext("2d");return this},drawingDefaults:function(options){if(typeof options==="undefined")options={};if(typeof options.fillStyle==="undefined")options.fillStyle="#F00";if(typeof options.strokeStyle==="undefined")options.strokeStyle="#F0F";if(typeof options.lineWidth==="undefined")options.lineWidth=2;if(typeof options.lineCap==="undefined")options.lineCap="round";if(typeof options.lineJoin==="undefined")options.lineJoin="round";if(typeof options.miterLimit==="undefined")options.miterLimit=10;this.saveGraphics(options);this.restoreGraphics(options);return this},size:function(width,height){this.stageWidth=width;this.stageHeight=height;this.canvas.width=width;this.canvas.height=height;this.restoreGraphics();return this},background:function(color){this.beginFill(color);this.graphics.fillRect(0,0,this.stageWidth,this.stageHeight);this.endFill();return this},stage:function(width,height,bgcolor){this.size(width,height).background(bgcolor);return this},beginFill:function(color){this.saveGraphics();this.graphics.fillStyle=color;return this},endFill:function(){this.restoreGraphics();return this},lineStyle:function(color,thickness,capStyle,joinStyle,miter){this.graphics.strokeStyle=color||this.graphics.strokeStyle;this.graphics.lineWidth=thickness||this.graphics.lineWidth;this.graphics.lineCap=capStyle||this.graphics.lineCap;this.graphics.lineJoin=joinStyle||this.graphics.lineJoin;this.graphics.miterLimit=miter||this.graphics.miterLimit;return this},moveTo:function(x,y){this.graphics.moveTo(x,y);return this},lineTo:function(x,y){this.graphics.lineTo(x,y);return this},line:function(x1,y1,x2,y2){this.graphics.moveTo(x1,y1);this.lineTo(x2,y2);return this},curveTo:function(x,y,cpx,cpy){this.graphics.quadraticCurveTo(cpx,cpy,x,y);return this},curve:function(x1,y1,x2,y2,cpx,cpy){this.graphics.moveTo(x1,y1);this.curveTo(x2,y2,cpx,cpy);return this},stroke:function(){this.graphics.stroke();return this},strokeRect:function(x,y,width,height){this.graphics.beginPath();this.graphics.strokeRect(x,y,width,height);this.graphics.closePath();return this},fillRect:function(x,y,width,height){this.graphics.beginPath();this.graphics.fillRect(x,y,width,height);this.graphics.closePath();return this},strokeCircle:function(x,y,radius){this.graphics.beginPath();this.graphics.arc(x,y,radius,0,Math.PI*2,false);this.graphics.stroke();this.graphics.closePath();return this},fillCircle:function(x,y,radius){this.graphics.beginPath();this.graphics.arc(x,y,radius,0,Math.PI*2,false);this.graphics.fill();this.graphics.closePath();return this},radialCircle:function(x,y,radius,color,glowSize){var g=this.graphics.createRadialGradient(x,y,radius,x,y,glowSize);g.addColorStop(0,color);g.addColorStop(1,"rgba(0,0,0,0)");this.graphics.fillStyle=g;this.fillCircle(x,y,radius);return this},beginPath:function(){this.saveGraphics();this.graphics.beginPath();return this},closePath:function(){this.graphics.closePath();this.restoreGraphics();return this},eraser:function(brushSize){if(typeof brushSize==="undefined")brushSize=15;this.graphics.globalCompositeOperation="destination-out";this.graphics.lineWidth=brushSize;return this},pencil:function(brushSize){if(typeof brushSize!=="undefined")this.graphics.lineWidth=brushSize;this.graphics.globalCompositeOperation="source-over";return this},clear:function(){this.graphics.clearRect(0,0,this.stageWidth,this.stageHeight);return this},save:function(){this.graphics.save();return this},restore:function(){this.graphics.restore();return this},saveGraphics:function(options){if(typeof options==="undefined")options=this.data.options;this.data.options=options;return this},restoreGraphics:function(options){if(typeof options==="undefined")options=this.data.options;for(var opt in options){this.graphics[opt]=options[opt]}return this},drawImage:function(src,x,y){if(typeof x==="undefined")x=0;if(typeof y==="undefined")y=0;var self=this,img=new Image;img.src=src;img.onload=function(){self.graphics.drawImage(img,x,y)};return this}};window.jSketch=jSketch})(this);