Debugging Fabricjs visually

Question

Is it possible to enable some kind of flag to give outline of all fabric js objects to be able to debug visually where items are placed.

I have tried:

 this.canvas?.getObjects().forEach(obj => {
        obj.set({
          strokeWidth: 2,
          stroke: 'red',
        });
      });

But this doesn't seem to work on my groups. I am hoping that fabric has some integrated feature for this.

Answer 1

See http://fabricjs.com/docs/fabric.Group.html#forEachObject

here is how i would use this :

this.canvas?.getObjects().forEach(obj => {
    obj.set({
    stroke: 'red',
    strokeWidth: 2,
  });

  if(obj.type.toLowerCase() === 'group') {
    obj.forEachObject((children) => {
      children.set({
          stroke: 'red',
          strokeWidth: 2,
      });
    });
  }
});