Eraser is not working

[Pradeepkadnor]

Hi,

Eraser is not working when erasing the line.It get clear instead of erasing
Also check on this link http://intridea.github.io/sketch.js/

[jeromechoo]

I don't know if anyone's working on this, but I just realized this is happening on my app as well. Weirdly, it's happening on a version of the app that hasn't been updated/changed for nearly 3-4 months. It definitely worked fine 3-4 months ago. Additionally, the issue only happens on Chrome and Firefox - no issues on Safari. More surprisingly, the demo at http://intridea.github.io/sketch.js/ works completely fine for me.

I'll keep digging, but this is a seriously weird bug.

EDIT: The eraser in the demo does NOT work in Chrome 37.0.2062.94 (same Chrome version)

[michaelrhodes]

Hey gang, it seems this was fixed two years ago, but the lib/ directory was never rebuilt. The key is changing "copy" to "destination-out" on line 173.

[jeromechoo]

@michaelrhodes THANK YOU THANK YOU THANK YOU!!! 👍 👍

[RyanBrainerd]

After changing line 173 to "destination-out" I was still having an issue on Chrome 42.0.2311.135 m.
The eraser wouldn't erase anything. Nothing happened at all. I didn't test other browsers.

Changing line 174 to hex instead of rgba fixed the eraser

action.color = "#000000";

[rodrigohajj]

Hello guys, i'v created a account just to help u all.
The real problem with the eraser is very simple.
On the line 173 you really need to change "copy" to "destination-out"
after doing that, all you need to do is on the line 174 instead of rgba(0,0,0,0), change to rgba(0,0,0,1)
Simple uhn?
works fine on chrome and any other broswer that supports html5

[cfsterpka]

Thanks rodrigohajj - that fixed it!

[Mike8000]

Hi All - What if i need both "clear canvas" (destination-out) and the "eraser" (copy). I tried putting in both codes one after another. It doesnt seem to work that way. Any help would be appreciated. Thanks much
sketch.js.zip

[mcandocia]

Copy the eraser code, name it something else, and treat it like the other non-eraser tools by inserting it somewhere before the original eraser (that clears everything). Don't use the return statement before it, either.

$.sketch.tools.true_eraser = {
  onEvent: function(e) {
    return $.sketch.tools.marker.onEvent.call(this, e);
  },
  draw: function(action) {
    var oldcomposite;
    oldcomposite = this.context.globalCompositeOperation;
    this.context.globalCompositeOperation = "destination-out";
    action.color = "rgba(0,0,0,1)";
    $.sketch.tools.marker.draw.call(this, action);
    return this.context.globalCompositeOperation = oldcomposite;
  }
};

[Mike8000]

Thanks @mcandocia

I also found another solution here:
#3

It seems to work for me. Thanks again

[TengfeiQi]

Thanks @mcandocia 👍 and thanks @Mike8000 (≧▽≦)/

[rkeet]

Also have a look at my comment of a few minutes ago on issue #3 , #3 (comment)

Takes into account that the background of the canvas might be an image. However, not as a CSS background but rather the canvas element (so it will be included in any printing/downloading of the canvas).