diff --git a/lib/sketch.js b/lib/sketch.js index 1f5c62f..3afa1dc 100644 --- a/lib/sketch.js +++ b/lib/sketch.js @@ -168,12 +168,16 @@ var __slice = Array.prototype.slice; return $.sketch.tools.marker.onEvent.call(this, e); }, draw: function(action) { - var oldcomposite; + var old_color, oldcomposite; + this.erasing = true; + old_color = action.color; oldcomposite = this.context.globalCompositeOperation; - this.context.globalCompositeOperation = "copy"; - action.color = "rgba(0,0,0,0)"; + this.context.globalCompositeOperation = "destination-out"; + action.color = "rgba(0,0,0,1)"; $.sketch.tools.marker.draw.call(this, action); - return this.context.globalCompositeOperation = oldcomposite; + this.context.globalCompositeOperation = oldcomposite; + this.erasing = false; + return action.color = old_color; } }; })(jQuery); \ No newline at end of file diff --git a/lib/sketch.min.js b/lib/sketch.min.js index 9638fde..3f0711f 100644 --- a/lib/sketch.min.js +++ b/lib/sketch.min.js @@ -1 +1 @@ -var __slice=Array.prototype.slice;(function(a){var b;return a.fn.sketch=function(){var c,d,e;d=arguments[0],c=2<=arguments.length?__slice.call(arguments,1):[],this.length>1&&a.error("Sketch.js can only be called on one element at a time."),e=this.data("sketch");if(typeof d!="string"||!e)return e?e:(this.data("sketch",new b(this.get(0),d)),this);if(!e[d])return a.error("Sketch.js did not recognize the given command.");if(typeof e[d]=="function")return e[d].apply(e,c);if(c.length===0)return e[d];if(c.length===1)return e[d]=c[0]},b=function(){function b(b,c){this.el=b,this.canvas=a(b),this.context=b.getContext("2d"),this.options=a.extend({toolLinks:!0,defaultTool:"marker",defaultColor:"#000000",defaultSize:5},c),this.painting=!1,this.color=this.options.defaultColor,this.size=this.options.defaultSize,this.tool=this.options.defaultTool,this.actions=[],this.action=[],this.canvas.bind("click mousedown mouseup mousemove mouseleave mouseout touchstart touchmove touchend touchcancel",this.onEvent),this.options.toolLinks&&a("body").delegate('a[href="#'+this.canvas.attr("id")+'"]',"click",function(b){var c,d,e,f,g,h,i;d=a(this),c=a(d.attr("href")),f=c.data("sketch"),i=["color","size","tool"];for(g=0,h=i.length;g1&&t.error("Sketch.js can only be called on one element at a time."),i=this.data("sketch"),"string"==typeof n&&i?i[n]?"function"==typeof i[n]?i[n].apply(i,e):0===e.length?i[n]:1===e.length?i[n]=e[0]:void 0:t.error("Sketch.js did not recognize the given command."):i?i:(this.data("sketch",new o(this.get(0),n)),this)},o=function(){function o(o,e){this.el=o,this.canvas=t(o),this.context=o.getContext("2d"),this.options=t.extend({toolLinks:!0,defaultTool:"marker",defaultColor:"#000000",defaultSize:5},e),this.painting=!1,this.color=this.options.defaultColor,this.size=this.options.defaultSize,this.tool=this.options.defaultTool,this.actions=[],this.action=[],this.canvas.bind("click mousedown mouseup mousemove mouseleave mouseout touchstart touchmove touchend touchcancel",this.onEvent),this.options.toolLinks&&t("body").delegate('a[href="#'+this.canvas.attr("id")+'"]',"click",function(){var o,e,n,i,s,a,r;for(e=t(this),o=t(e.attr("href")),i=o.data("sketch"),r=["color","size","tool"],s=0,a=r.length;a>s;s++)n=r[s],e.attr("data-"+n)&&i.set(n,t(this).attr("data-"+n));return t(this).attr("data-download")&&i.download(t(this).attr("data-download")),!1})}return o.prototype.download=function(t){var o;return t||(t="png"),"jpg"===t&&(t="jpeg"),o="image/"+t,window.open(this.el.toDataURL(o))},o.prototype.set=function(t,o){return this[t]=o,this.canvas.trigger("sketch.change"+t,o)},o.prototype.startPainting=function(){return this.painting=!0,this.action={tool:this.tool,color:this.color,size:parseFloat(this.size),events:[]}},o.prototype.stopPainting=function(){return this.action&&this.actions.push(this.action),this.painting=!1,this.action=null,this.redraw()},o.prototype.onEvent=function(o){return o.originalEvent&&o.originalEvent.targetTouches&&(o.pageX=o.originalEvent.targetTouches[0].pageX,o.pageY=o.originalEvent.targetTouches[0].pageY),t.sketch.tools[t(this).data("sketch").tool].onEvent.call(t(this).data("sketch"),o),o.preventDefault(),!1},o.prototype.redraw=function(){var o;return this.el.width=this.canvas.width(),this.context=this.el.getContext("2d"),o=this,t.each(this.actions,function(){return this.tool?t.sketch.tools[this.tool].draw.call(o,this):void 0}),this.painting&&this.action?t.sketch.tools[this.action.tool].draw.call(o,this.action):void 0},o}(),t.sketch={tools:{}},t.sketch.tools.marker={onEvent:function(t){switch(t.type){case"mousedown":case"touchstart":this.startPainting();break;case"mouseup":case"mouseout":case"mouseleave":case"touchend":case"touchcancel":this.stopPainting()}return this.painting?(this.action.events.push({x:t.pageX-this.canvas.offset().left,y:t.pageY-this.canvas.offset().top,event:t.type}),this.redraw()):void 0},draw:function(t){var o,e,n,i,s;for(this.context.lineJoin="round",this.context.lineCap="round",this.context.beginPath(),this.context.moveTo(t.events[0].x,t.events[0].y),s=t.events,n=0,i=s.length;i>n;n++)o=s[n],this.context.lineTo(o.x,o.y),e=o;return this.context.strokeStyle=t.color,this.context.lineWidth=t.size,this.context.stroke()}},t.sketch.tools.eraser={onEvent:function(o){return t.sketch.tools.marker.onEvent.call(this,o)},draw:function(o){var e,n;return this.erasing=!0,e=o.color,n=this.context.globalCompositeOperation,this.context.globalCompositeOperation="destination-out",o.color="rgba(0,0,0,1)",t.sketch.tools.marker.draw.call(this,o),this.context.globalCompositeOperation=n,this.erasing=!1,o.color=e}}}(jQuery); \ No newline at end of file diff --git a/src/sketch.coffee b/src/sketch.coffee index 00af6a8..f253d31 100644 --- a/src/sketch.coffee +++ b/src/sketch.coffee @@ -1,7 +1,7 @@ # # Sketch.js (v0.0.1) # # **Sketch.js** is a simple jQuery plugin for creating drawable canvases -# using HTML5 Canvas. It supports multiple browsers including mobile +# using HTML5 Canvas. It supports multiple browsers including mobile # devices (albeit with performance penalties). (($)-> # ### jQuery('#mycanvas').sketch(options) @@ -47,7 +47,7 @@ # * `toolLinks`: If `true`, automatically turn links with href of `#mycanvas` # into tool action links. See below for a description of the available # tool links. - # * `defaultTool`: Defaults to `marker`, the tool is any of the extensible + # * `defaultTool`: Defaults to `marker`, the tool is any of the extensible # tools that the canvas should default to. # * `defaultColor`: The default drawing color. Defaults to black. # * `defaultSize`: The default stroke size. Defaults to 5. @@ -116,8 +116,8 @@ # ### sketch.startPainting() # - # *Internal method.* Called when a mouse or touch event is triggered - # that begins a paint stroke. + # *Internal method.* Called when a mouse or touch event is triggered + # that begins a paint stroke. startPainting: -> @painting = true @action = { @@ -135,10 +135,10 @@ @painting = false @action = null @redraw() - + # ### sketch.onEvent(e) # - # *Internal method.* Universal event handler for the canvas. Any mouse or + # *Internal method.* Universal event handler for the canvas. Any mouse or # touch related events are passed through this handler before being passed # on to the individual tools. onEvent: (e)-> @@ -173,7 +173,7 @@ # # Tools can be added simply by adding a new key to the `$.sketch.tools` object. $.sketch = { tools: {} } - + # ## marker # # The marker is the most basic drawing tool. It will draw a stroke of the current @@ -198,7 +198,7 @@ @context.lineJoin = "round" @context.lineCap = "round" @context.beginPath() - + @context.moveTo action.events[0].x, action.events[0].y for event in action.events @context.lineTo event.x, event.y @@ -215,9 +215,13 @@ onEvent: (e)-> $.sketch.tools.marker.onEvent.call this, e draw: (action)-> + @erasing = true + old_color = action.color oldcomposite = @context.globalCompositeOperation @context.globalCompositeOperation = "destination-out" action.color = "rgba(0,0,0,1)" $.sketch.tools.marker.draw.call this, action @context.globalCompositeOperation = oldcomposite + @erasing = false + action.color = old_color )(jQuery)