html5 canvas清除绘制问题，想不影响图片，求解

Question

1. 首先非常感谢您能查看我的疑惑，我会在下面描述我的疑问，烦劳您看一下，非常感谢

2. 我把一张图片绘制在canvas中，效果如下.想实现的效果： 图片中红色圆形区域是目标区域，鼠标落在这里，提示正确。否则提示错误

1. 我已经实现了点击提示效果，但是我点击了错误区域之后，会出现一个红色叉号（使用canvas绘制的）；再下一次点击时候，我想把之前出现的红色叉号清除（使用clearRect），但是不清楚笑脸图片 ,我的疑惑就是使用context.clearRect()会导致把笑脸图片也会清除，效果如下；

1. 我的疑惑是：我想清除上一次点击出现的叉号，同时保留笑脸图片，请问有什么好的解决方案么？再次感谢您

Answer 1

The first method is to define a switch variable. When the mouse is down, the switch variable is true in the specified area and draw ❌, otherwise it will not be drawn.
The second method is to redraw the image after using clearRect.
The third method is as follows. As Lou said, don’t clear it, just overwrite it directly,

Answer 2

Not sure what kind of functionality you ultimately want. If it were me, the red dots and crosses would be directly covered with img without using canvas. This is an example of mine. It looks like it has a lot to do with canvas, but it’s actually all done by img

In addition, if you want to do this here, you can simply simulate the technique of using a library such as createjs: you need a rendering loop

function renderingLoop() {
    if(!dirty)
        return;
        
    // do your clearRect
    context.clearRect();
    
    // for-each every targets you want to render into the canvas
    displayObjects.forEach(function(object) {
       if(!object.hidden) {
           // draw this object into canvas
       }
    });

    requestAnimationFrame(renderingLoop);
}

The above is an idea

1. Put the target object to be drawn on the canvas in a loop and render it in a loop

2. When an interaction occurs, change the hidden attribute of the corresponding object and update the dirty flag variable to tell the loop that it needs to be redrawn

3. The next time the loop occurs, all new objects marked as hidden will be gone, and other objects will still be drawn on the canvas

Answer 3

The cross is a constant, and the drawing is a variable. The two should not be in the same canvas. You can use the cross in HTML or another canvas, or use other canvas libraries, similar to createjs

Answer 4

I don’t know if this book on core technologies of HTML and canvas from Mechanical Engineering Society can help you