How to remove an element from a field?

Question

JavaScript

There is a code that puts a stone (Go term) on the field, the code does a great job, but there is a need to remove this stone (Go term) from the field, how can this be done?
But in order not to erase part of the field under the stone after removal.

ctx.beginPath();
      ctx.moveTo(140, 140);
      ctx.arc(140, 140, 18.5, 0, 2 * Math.PI);
      ctx.stroke();
      ctx.fill();

Answer 1

no way, redraw the canvas without a stone

Answer 2

You use the canvas as a state store - this is an imperative approach and therefore inconvenient. It's like jQuery, only worse because you don't have selectors. You should not rely on what is drawn on the canvas. Your canvas should just serve as a representation. Put all your data in JS as an array or an object, whichever you prefer. Next, write the code that will redraw your canvas when the state changes. There are two ways to solve problems: the first is the one that you tried to solve the issue - a direct way, the second way is to change the task so that in the new context the problem becomes impossible, meaningless, in general, ceased to exist. If you take out all the logic in JS, then the question “how to delete” will not remain with you.