What is the method to Fill empty spaces in a Path?

[rafasashi]

Is there a method to fill the empty space in the middle of a path with a solid background color.

My goal is to trace a background fill that covers the entire shape, including filling in the gaps.

I have tried to truncate path after second 'M' command based on the following answer:

https://graphicdesign.stackexchange.com/questions/166236/what-is-the-method-to-fill-gaps-in-an-svg-path-with-color

However if the shape is composed of separated elements then only one element is drawn.

So instead I tried to split all subpath and add them as a unique object. The overlapping gave the result that I was expecting in most cases:

However the performance is very bad for larger objects and I can't implement it that way.

So now I am trying to find a way to detect empty shapes and either draw an inverted path on top or discard them to speedup the splitting process.

Alternatively detecting the largest object and/or disconnected large objects is something that I have tried to do with boolean operations via paper.js but exporting and importing path is not giving good results.

Any suggestions would be greatly appreciated!

[rafasashi]

I also tried inverting and clipping the shape on top of a colored rectangle with different combinations of globalCompositeOperation but I always end-up with a colored surrounding which I can't exclude:

[asturur]

I do not think you can find a way that covers all the path use cases.
You have to try to change the fillRule property between the 2 available values and see if it gives you some coverage.

Who controls the paths?
If they are from a static library you should just provide a path for each path that can accomplish this task.

You can't automate the process without using some tool that has path knowledge like paper.js indeed.

[rafasashi]

Thanks, @asturur! For now, I'll be using a default library of objects and manually "preparing" the background path as needed.

In the future, I'm hoping to allow users to import objects directly, ideally by automating processes like union, simplification, and inversion.

However, I think the first step will be finding a way to go from rasterizing to tracing (possibly with AI), optimizing, and then drawing.

[asturur]

but also try fillRule. I don't see it mentioned in your examples. It should do the same thing that you separating the objects in many paths is doing, but with no performance cost.

[rafasashi]

Perhaps I am doing something wrong, but neither nonzero nor evenodd seem to make any difference. I've tried using different paths, but nothing seems to change.

   var attr = {
   	
   	id: group.id + '_background',
   	fillRule: 'nonzero', //<---------------- tried here
   				
   };

   self.getGroupAttrs().forEach(function(i) {
   	
   	if( typeof attr[i] === 'undefined' && typeof group[i] !== 'undefined' ) {
   		
   		attr[i] = group[i];
   	}
   });

   var clonedGroup = new fabric.Group([],attr);
   
   group.getObjects().forEach(function(obj,index) {

   	if (obj.type === 'path') {
   		
   		obj.clone(function(clonedObj) {
   					
   			clonedObj.set({
   					
   				id: group.id + '_path_' + index,
   				fill: 'red',
   				fillRule: 'nonzero', //<---------------- and tried here
   				strokeWidth: 0,
   			});
   				
   			clonedGroup.add(clonedObj);
   		});
   	}
   });

[rafasashi]

However, it works with the polygon from the following example: https://www.geeksforgeeks.org/fabric-js-polygon-fillrule-property/

[rafasashi]

I am using 5.3.1 maybe it's a problem...

[asturur]

no is not a problem per se.
Make a test with caching off in case fillRule is strangely out of the cache invalidating properties.
If it doesn't give you any difference it can be just that the paths are identical under the 2 conditions. Not all the paths react the same.
That is why i told you, you can't make this with a blanket approach