Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed the eraser #33

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fixed the eraser #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions lib/sketch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
2 changes: 1 addition & 1 deletion lib/sketch.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

20 changes: 12 additions & 8 deletions src/sketch.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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 = {
Expand All @@ -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)->
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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)