Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 Canvas eraser

Tags:

html

canvas

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.

like image 726
Valentina Avatar asked Sep 24 '10 19:09

Valentina


People also ask

Is there an eraser tool in canvas?

While there is no eraser tool available in Canva, there are a few workaround options that you can use to achieve a similar effect. The “clear” button located next to the pencil tool in the main menu can remove any lines or shapes drawn on the canvas but not any added text.

Is HTML5 canvas still used?

The HTML5 canvas has the potential to become a staple of the web, enjoying ubiquitous browser and platform support in addition to widespread webpage support, as nearly 90% of websites have ported to HTML5.

What can you do with HTML5 canvas?

HTML5 element <canvas> gives you an easy and powerful way to draw graphics using JavaScript. It can be used to draw graphs, make photo compositions or do simple (and not so simple) animations.


1 Answers

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.

like image 198
Artpanther Avatar answered Sep 20 '22 06:09

Artpanther