diff --git a/jsketch.js b/jsketch.js index 7635d82..2ba43d3 100644 --- a/jsketch.js +++ b/jsketch.js @@ -42,14 +42,7 @@ this.stageWidth = elem.getAttribute("width"); this.stageHeight = elem.getAttribute("height"); // Drawing defaults. - this.graphics.fillStyle = typeof options.fillStyle !== 'undefined' ? options.fillStyle : '#F00'; - this.graphics.strokeStyle = typeof options.strokeStyle !== 'undefined' ? options.strokeStyle : '#F0F'; - this.graphics.lineWidth = typeof options.lineWidth !== 'undefined' ? options.lineWidth : 2; - this.graphics.lineCap = typeof options.lineCap !== 'undefined' ? options.lineCap : 'round'; - this.graphics.lineJoin = typeof options.lineJoin !== 'undefined' ? options.lineJoin : 'round'; - this.graphics.miterLimit = typeof options.miterLimit !== 'undefined' ? options.miterLimit : 10; - // Remember graphic options for later saveing/restoring drawing status. - this.graphics.options = Object.keys(options); + this.drawingDefaults(options); // Make room for storing some data such as brush type, colors, etc. this.data = {}; // Make constructor chainable. @@ -76,6 +69,30 @@ // Always allow chainability. return this; }, + /** + * Sets drawing defaults. + * @param {Object} [options] - Drawing options. + * @param {String} options.fillStyle - Fill style color (default: '#F00'). + * @param {String} options.strokeStyle - Stroke style color (default: '#F0F'). + * @param {Number} options.lineWidth - Line width (default: 2). + * @param {String} options.lineCap - Line cap (default: 'round'). + * @param {String} options.lineJoin - Line join (default: 'round'). + * @param {Number} options.miterLimit - Line miter (default: 10). Works only if the lineJoin attribute is "miter". + * @return jSketch + * @memberof jSketch + */ + drawingDefaults: function(options) { + if (typeof options === 'undefined') options = {}; + this.graphics.fillStyle = typeof options.fillStyle !== 'undefined' ? options.fillStyle : '#F00'; + this.graphics.strokeStyle = typeof options.strokeStyle !== 'undefined' ? options.strokeStyle : '#F0F'; + this.graphics.lineWidth = typeof options.lineWidth !== 'undefined' ? options.lineWidth : 2; + this.graphics.lineCap = typeof options.lineCap !== 'undefined' ? options.lineCap : 'round'; + this.graphics.lineJoin = typeof options.lineJoin !== 'undefined' ? options.lineJoin : 'round'; + this.graphics.miterLimit = typeof options.miterLimit !== 'undefined' ? options.miterLimit : 10; + // Remember graphic options for later saveing/restoring drawing status. + this.graphics.options = Object.keys(options); + return this; + }, /** * Sets the dimensions of canvas. * @param {Number} width - New canvas width. @@ -88,6 +105,8 @@ this.stageHeight = height; this.canvas.width = width; this.canvas.height = height; + // On resizing we lost drawing options, so reset. + this.drawingDefaults(); return this; }, /** @@ -100,7 +119,7 @@ var oldFill = this.graphics.fillStyle; this.beginFill(color); this.graphics.fillRect(0,0,this.stageWidth,this.stageHeight); - this.beginFill(oldFill); // Restore old fill + this.endFill(); return this; }, /** diff --git a/jsketch.min.js b/jsketch.min.js index 10c4a13..ff17cef 100644 --- a/jsketch.min.js +++ b/jsketch.min.js @@ -2,4 +2,4 @@ * jSketch 0.8 | Luis A. Leiva | MIT license * A simple JavaScript library for drawing facilities on HTML5 canvas. */ -(function(a){var c=function(e,d){return new b(e,d)};var b=function(e,d){if(!e){return}if(typeof d==="undefined"){d={}}this.context(e);this.stageWidth=e.getAttribute("width");this.stageHeight=e.getAttribute("height");this.graphics.fillStyle=typeof d.fillStyle!=="undefined"?d.fillStyle:"#F00";this.graphics.strokeStyle=typeof d.strokeStyle!=="undefined"?d.strokeStyle:"#F0F";this.graphics.lineWidth=typeof d.lineWidth!=="undefined"?d.lineWidth:2;this.graphics.lineCap=typeof d.lineCap!=="undefined"?d.lineCap:"round";this.graphics.lineJoin=typeof d.lineJoin!=="undefined"?d.lineJoin:"round";this.graphics.miterLimit=typeof d.miterLimit!=="undefined"?d.miterLimit:10;this.graphics.options=Object.keys(d);this.data={};return this};c.fn=b.prototype={context:function(d){if(d==null){throw ("No canvas element specified.")}this.canvas=d;this.graphics=d.getContext("2d");return this},size:function(e,d){this.stageWidth=e;this.stageHeight=d;this.canvas.width=e;this.canvas.height=d;return this},background:function(d){var e=this.graphics.fillStyle;this.beginFill(d);this.graphics.fillRect(0,0,this.stageWidth,this.stageHeight);this.beginFill(e);return this},stage:function(f,d,e){this.size(f,d).background(e);return this},beginFill:function(d){this.saveGraphics();this.graphics.fillStyle=d;return this},endFill:function(){this.graphics.fillStyle=this.data.fillStyle;return this},lineStyle:function(d,e,f,h,g){this.graphics.strokeStyle=d||this.graphics.strokeStyle;this.graphics.lineWidth=e||this.graphics.lineWidth;this.graphics.lineCap=f||this.graphics.lineCap;this.graphics.lineJoin=h||this.graphics.lineJoin;this.graphics.miterLimit=g||this.graphics.miterLimit;return this},moveTo:function(d,e){this.graphics.moveTo(d,e);return this},lineTo:function(d,e){this.graphics.lineTo(d,e);return this},line:function(e,g,d,f){this.graphics.moveTo(e,g);this.lineTo(d,f);return this},curveTo:function(d,g,f,e){this.graphics.quadraticCurveTo(f,e,d,g);return this},curve:function(f,i,d,h,g,e){this.graphics.moveTo(f,i);this.curveTo(d,h,g,e);return this},stroke:function(){this.graphics.stroke();return this},strokeRect:function(e,g,f,d){this.graphics.beginPath();this.graphics.strokeRect(e,g,f,d);this.graphics.closePath();return this},fillRect:function(e,g,f,d){this.graphics.beginPath();this.graphics.fillRect(e,g,f,d);this.graphics.closePath();return this},strokeCircle:function(e,f,d){this.graphics.beginPath();this.graphics.arc(e,f,d,0,Math.PI*2,false);this.graphics.stroke();this.graphics.closePath();return this},fillCircle:function(e,f,d){this.graphics.beginPath();this.graphics.arc(e,f,d,0,Math.PI*2,false);this.graphics.fill();this.graphics.closePath();return this},radialCircle:function(e,j,d,f,h){var i=this.graphics.createRadialGradient(e,j,d,e,j,h);i.addColorStop(0,f);i.addColorStop(1,"rgba(0,0,0,0)");this.graphics.fillStyle=i;this.fillCircle(e,j,d);return this},beginPath:function(){this.saveGraphics();this.graphics.beginPath();return this},closePath:function(){this.graphics.closePath();this.restoreGraphics();return this},eraser:function(d){if(typeof d==="undefined"){d=15}this.graphics.globalCompositeOperation="destination-out";this.graphics.lineWidth=d;return this},pencil:function(d){if(typeof d!=="undefined"){this.graphics.lineWidth=d}this.graphics.globalCompositeOperation="source-over";return this},clear:function(){this.graphics.clearRect(0,0,this.stageWidth,this.stageHeight);this.data={};return this},save:function(){this.graphics.save();return this},restore:function(){this.graphics.restore();return this},saveGraphics:function(d){if(typeof d==="undefined"){d=this.graphics.options}if(typeof d==="string"){d=d.split(" ")}for(var e=0;e