HTML5 Canvas eraser

Question

There's a way of implementing an eraser (other than using a white pencil?).

I'm using layering, I have an image below the canvas, so, if eraser paints white, the user is going to notice since the below image isn't solid white.

score 4 · Answer 1 · edited Oct 04 '19 at 09:58

4

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing

Actually the function is:

function eraser(){
    context.globalCompositeOperation = "destination-out";  
    context.strokeStyle = "rgba(255,255,255,1)";
}

And you can go back to source-over.

edited Oct 04 '19 at 09:58

gman

92,182
29
231
348

answered Dec 16 '14 at 23:10

Artpanther

41
1

score 2 · Answer 2 · edited May 23 '17 at 12:02

2

As an alternative, you can use multiple <canvas> objects drawn over each other, then erase from the top canvas to reveal the image beneath. See: html5 - canvas element - Multiple layers

edited May 23 '17 at 12:02

Community

1
1

answered Sep 24 '10 at 21:18

ChessWhiz

4,468
3
25
38

score 2 · Answer 3 · edited Jan 13 '14 at 14:51

2

function eraser()
{                                
context.strokeStyle = "rgb(255, 255, 255)";
context.globalCompositeOperation = "copy";  
context.strokeStyle = ("rgba(255,255,255,255)"); /* or */ context.fillStyle = "rgba(255,0,0,0)";
}

both worked in my case!

edited Jan 13 '14 at 14:51

Fabián

555
1
5
29

answered Jan 03 '11 at 23:40

Nitesh

1,205
4
16
25

this does not remotely work. [proof](https://jsfiddle.net/greggman/jo5nqrzs/) – gman Oct 04 '19 at 09:54

score 0 · Answer 4 · answered Feb 28 '15 at 10:05

Code for transparent eraser using globalCompositeOperation "destination-out" and "source-over"

var handleMouseMove = function (event) {
    midPt = new createjs.Point(oldPt.x + stage.mouseX>>1, oldPt.y+stage.mouseY>>1);

   if(curTool.type=="eraser"){

      var tempcanvas = document.getElementById('drawcanvas');
      var tempctx=tempcanvas.getContext("2d");
      tempctx.beginPath();
      tempctx.globalCompositeOperation = "destination-out";   
      tempctx.arc(midPt.x, midPt.y, 20, 0, Math.PI * 2, false);     
      tempctx.fill();
      tempctx.closePath();
      tempctx.globalCompositeOperation = "source-over";
      drawingCanvas.graphics.clear();

      // keep updating the array for points 
      arrMidPtx.push(midPt.x);
      arrMidPty.push(midPt.y);
      stage.addChild(drawingCanvas);
      stage.update();

    }

I have used easeljs here however the code is independent from it and can be integrated with any canvas html5 drawing javascript code

score -2 · Answer 5 · answered Sep 24 '10 at 19:32

-2

set the pencil color to transparent:

context.fillStyle = "rgba(255,0,0,0)";

in rgba() format, the last one is the alpha channel, 0 is totally transparent

answered Sep 24 '10 at 19:32

Javier

58,927
8
76
126

1

It does't work. The 'eraser pencil' stills draw on red (the color of the actual drawing pencil). – Valentina Sep 24 '10 at 19:38
try setting the color as simply "transparent" (http://dev.w3.org/csswg/css3-color/#transparent), or maybe `strokestyle` instead of `fillstyle` – Javier Sep 24 '10 at 19:43
=( Nothing. I already tried both context.strokeStyle = "rgba(0,0,0,0)"; and context.fillStyle = "rgba(0,0,0,0)";. Any ideas? – Valentina Sep 24 '10 at 19:46

HTML5 Canvas eraser

5 Answers5

Linked