试图让 "eraser" 与 HTML5 Canvas 和 Vaadin 一起工作，但它只是清除

Question

我正在使用 Vaadin 并尝试使用 Canvas 部分来进行一些简单的涂鸦。为了实现这一点，我正在使用 Vaadin 的 CanvasPlus 库，它运行良好，但我不知道如何让它擦除我绘制的内容。

当用户点击时，我得到坐标并开始绘制：

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

然后在下一次鼠标移动时，我开始连接他们绘制的线条：

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

并且 per this answer 当他们点击擦除时我调用：

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

但它只是在我拖动后立即清除整个 canvas，即使我离之前的图纸还很远。

我做错了什么？

Answer 1

我声称对 vaadin 一无所知，但一般来说，对于组合，您应该使用 destination-out 模式来清除您在上面绘制的内容。

copy 正如您所发现的那样只是复制，因此所有现有内容都将被清除，因为 0 字节被复制了。

尝试：

canvas.setGlobalCompositeOperation("destination-out");

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