CODEWITHSUNDEEP
javascripthtmlcanvasvaadin
Doug Smith
Doug Smith

Reputation: 29316

Trying to get an "eraser" working with the HTML5 Canvas and Vaadin, but it just clears

I'm using Vaadin and attempting to have a Canvas portion for some simple doodles. I'm using the CanvasPlus library for Vaadin in order to accomplish this, and it's working well but I cannot figure out how to make it erase what I've drawn.

When the user clicks down I get the coordinates and begin drawing there:

canvas.beginPath();
canvas.moveTo(relativeX, relativeY);

And then on the next mouse movement I begin connecting the lines from what they've drawn:

canvas.lineTo(relativeX, relativeY);
canvas.setStrokeStyle(color);
canvas.stroke();

And per this answer when they click erase I call:

canvas.setGlobalAlpha(0.0);
canvas.setStrokeStyle(0, 0, 0);
canvas.setGlobalCompositeOperation("copy");

But it just clears the whole canvas as soon as I drag, even if I'm nowhere near the previous drawings.

What am I doing wrong?

Upvotes: 0

Views: 86

Answers (1)

user1693593
user1693593

Reputation:

I claim no knowledge of vaadin, but in general, for composition you should use the destination-out mode to clear something existing with what you draw on top.

copy will as you discovered just copy, so everything existing will be cleared as 0-bytes are copied over.

Try:

canvas.setGlobalCompositeOperation("destination-out");

Upvotes: 1

Related Questions