How to implement a "Dual-Canvas"-Editor in fabric.js 5.3.0 with Angular?

[schtucks]

I'm developing an advanced image editor component in Angular using Fabric.js, and I'm struggling to implement a specific dual-canvas structure. Here's what I'm trying to achieve:

Key components:

1. A static background canvas with a checkerboard pattern (working correctly).
2. An overlaid drawing canvas for image display and editing (not functioning as expected).

Critical issues:
Drawing on the top canvas is non-functional. No lines or shapes appear when attempting to draw. Events on the drawing canvas are not being logged or detected at all. Editing features (like adding shapes or applying filters) don't work on the drawing canvas.

I suspect there might be fundamental problems with my current architecture using two overlapping canvases.

Here is a link where i got this idea from: Vue Fabric Editor Demo
Here is a minimal example of my implementation: Stackblitz

Questions:

1. Why aren't events being detected on my drawing canvas? Is my setup with two canvases preventing proper event handling?
2. How can I enable drawing and editing features on the top canvas while maintaining the static background?
3. Are there specific Fabric.js configurations needed for this dual-canvas setup to work correctly?
4. Could the overlapping canvases be causing z-index or event propagation issues? If so, how can I resolve this?
5. Is there a more effective approach to achieve this functionality in Angular with Fabric.js?

I've attempted various event binding methods and canvas configurations, but none have resolved the core issues. Any insights into why my current implementation isn't working or suggestions for a better approach would be immensely helpful.

Thank you for your assistance!

[asturur]

    this.drawingCanvas = new fabric.fabric.Canvas(null, {
      width: imgWidth! * this.devicePixelRatio,
      height: imgHeight! * this.devicePixelRatio,
      enableRetinaScaling: true,
      isDrawingMode: true,
    });

you create the drawingCanvas with a null element, when does it get attached to the dom?