multiple canvas layer support?

[upzhujie]

hey, is it possible to create multiple canvas layer in fabric to speed up performance?

// eg
const canvas = new fabric.Canvas('canvas'); // now it will create a default canvas layer and topCanvas

const newLayer1 = new fabric.Layer(...)
                                   
const newLayer2 = new fabric.Layer(...)

const rect = new fabric.Rect({
  top : 100,
  left : 100,
  width : 60,
  height : 70,
  fill : 'red'
});

canvas.add(newLayer1)
canvas.add(newLayer2)

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas

as we know , using multiple layer to render some complex scenes is a efficient way. so I wonder this feature is under ur plans or it is out of ur plans

[ShaMan123]

#7670

[ShaMan123]

@asturur this makes me think about a feature.
What if the canvas class is split into a canvas/context class and a renderer.
This way devs could create as many canvases they want and configure the renderer appropriately.
Sounds very interesting to me, with lots of potential. And will fix out of the box all the concerns about top context.
A dev could configure where to render a brush and where to render selection and so on.
Perf will benefit.
What do you think?

[asturur]

Yes with many canvases you could of course redraw just a group or a layer, right?
An common example is having 3 canvases instead of 2:
you divide the stack in 3 parts:

• below used object
• used object
• above user object
  you draw below and above once, you draw the used object for your animation or trasnform.
  This would have edge cases with multiple selections and preserve object stacking for example.
  would probably decrease memory usage compared to object caching per object.
  i know that list posted on MDN, but the only use case that apply to us i think is this one here

[melchiar]

A 3-canvas system where the selected object is in a central layer would be a huge boost to performance, but would create cause difficulties when an active selection includes objects at different indexes, with non-selected objects in between.

I suppose it could draw all objects between the lowest to highest index of the selection on the center canvas to deal with that edge case?

[ShaMan123]

You mean when preserveObjectStacking=true?

[melchiar]

Yes. Having preserveObjectStacking:true means your active selection might include an object at index 3 and index 7, leaving objects 4-6 in between that aren't part of the selection

[ShaMan123]

Good point, I guess this is why it wasn't done.
This is why IMO Layers are easier to solve this

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Suriyasanjay]

useEffect(() => {
// const canvas = new fabric.Canvas(canvasRef.current)
for (var i = 0; i < canvasList.length; i++) {

  const canvasId: any = document.getElementById(canvasList[i]) 

const canvas = new fabric.Canvas(canvasId ,{
  // preserveObjectStacking:true,
  // selectionBorderColor:'green',
  // isDrawingMode:true

  
})

fabric.Object.prototype.cornerColor='green'

// canvas.calcOffset()

console.log(canvas)

fabric.Object.prototype.transparentCorners = false;
// canvas.loadFromJSON(initialJson, canvas.renderAll.bind(canvas))
canvas.on('object:modified', handleObjectModified);
const handleSelection = () => {
  const activeObject = canvas.getActiveObject();

  console.log(activeObject?.type)
  console.log(line)
}
setCanvas(canvas)
canvas.on('selection:created', handleSelection);
canvas.on('selection:updated', handleSelection);
canvas.on('selection:cleared', handleSelection);
return () => {
  canvas.off('selection:created', handleSelection);
  canvas.off('selection:updated', handleSelection);
  canvas.off('selection:cleared', handleSelection);
  canvas.off('object:modified', handleObjectModified);

  canvas.dispose();
 
};


}

}, []);

I can add the multiple canvas but cannot give adding shapes or elements in the currently selelcted canvas it always adding at first canvas alone in react ????