I'm implementing an Eraser for drawing on a React Native application. The drawings in the application were implemented using SVG.

Found this very helpful answer on how to go about it by using Masks.

However, after implementing that, an edge case that came up while implementing the above was when a Mask is added, a new drawing on that coordinate wouldn't display since the Mask is hiding it.

So, I came up with a solution of using layers. When adding the Mask with the eraser, I set the Id to a number which is increased when the User picks the Eraser.

And, when drawing a new Path, use the incremented number as the mask id.

Here's a sample of my code:

Array.from(Array(currentEraserMaskLayer).keys()).map((value, index) => {
  return (
    <Mask key={`eraser-mask-${index + 1}`} id={`Mask${index + 1}`} maskUnits="userSpaceOnUse">
      <Rect width="100%" height="100%" fill="white" />
      <G>
        {currentShapes.map((shape) => {
            return shape.points.map((point, index) => {
              return (
                <Circle key={index} cx={point.x} cy={point.y} r={30} fill="#000" stroke="#000" strokeWidth={0} />
              );
            });
        })}
      </G>
    </Mask>
  );
});

And, the drawings are implemented like this:

 <Path
        key={`shape-${shape.id}`}
        d={shape.d}
        stroke={shape.stroke}
        strokeWidth={4}
        mask={`url(#Mask${shape.eraserMaskLayer})`}
      />

And this works, new drawings aren't hidden by existing masks.

But, another edge case crops up, older drawings aren't hidden by new Eraser masks, since they're on different 'layers'. And, this is where I'm stuck.

I'll appreciate any idea on how to move forward with this, or if there's another way of implementing an Eraser using SVG.

Please let me know if I need to provide any more info.

Many thanks.