In OpenLayers 6, remove or rub drawing features like any photo editing application

Question

I am working on application where user can do drawing and change color, stroke, fill and perform undo, redo.

One feature is user should have option to rub/remove features like Photoshop or paint. Currently OpenLayers provides a functionality of removing the whole feature. For example, if I want to remove a circle, I click on rubber and then click on circle. It will get remvoed.

But the requirement is a rubber should be like freehand and user should rub some parts of circle/any drawing or fully remove it.

I am thinking of using image instead of vector layer.

After looking into the OpenLayers 6 API, it comes with VectorImage and drawing is working fine with that but I am not sure if this is achievable easily or I have to do it in a complex way by detect the click and feature and breaking down the feature but in that case user can rub a single circle into 100s parts so I am not sure about that too.

I have not started implementing this feature so no code yet. I am just thinking of where and how to start.

Answer 1

Going with a vector layer is entirely doable, you'll just have to use a library like turf.js to check on every click/drag which features are intersecting, and modify them accordingly (e.g. substract a circle). There are indeed some edge cases to handle like avoiding very small geometries to stick around. Also after a while you may end up with a lot of data on your map, which may or may not be a problem down the line.

You could also consider using a bitmap covering an area which you would then modify using the Canvas2D API for instance. This might be a bit more tricky to set up, and this will have limitations since your bitmap will cover a finite area at a fixed resolution, so zooming in or out too much will make this solution pointless.

To answer your question of whether this is achievable easily, the answer is no, unfortunately.