The canvas keeps flashing when setting the canvas width and height.

[overdev-l]

type CoreOptions = {
  container: string;
};

class Render {
    private _canvas: HTMLCanvasElement;
    private _container!: {
      element: HTMLElement;
      width: number;
      height: number;
    };
  	private _ResizeObserver: ResizeObserver;
    public _FC: Canvas;
    constructor(private options: CoreOptions) {
    	this.init();
  	}
  	
    private init = () => {
      this._canvas = document.createElement('canvas');
      this._canvas.style.position = 'absolute';
      this._canvas.style.top = '0';
      this._canvas.style.left = '0';
      this._container = getContainer(this.options.container);
      this._container.element.style.position = 'relative';
      this._container.element.appendChild(this._canvas);
      this._FC = new Canvas(this._canvas, {
        backgroundColor: 'rgba(0, 0, 0, 0.1)',
        interactive: true,
        isDrawingMode: false,
        preserveObjectStacking: true,
        enableRetinaScaling: true,
        renderOnAddRemove: true,
      });
      this.setCanvasSize();
      this.initResizeObserver();
  	};
  
    private setCanvasSize = () => {
      this._container = getContainer(this.options.container);
      this._FC.setDimensions({
        width: this._container.width,
        height: this._container.height,
      });
    };
  
    private initResizeObserver = () => {
      this._ResizeObserver = new ResizeObserver(() => {
        this.setCanvasSize();
      });
      this._ResizeObserver.observe(this._container.element);
    };
}

This is my code, I want the canvas to resize when the container size changes. When I resize the browser window the canvas is flickering

[overdev-l]

2025-01-10.16.22.07.mov

[overdev-l]

I added the renderAll call to setCanvasSize, and I'm not sure if this affects the other issues

[asturur]

setDimension is going to render at the next animation frame, if you call renderAll right away you could avoid flickering. There should be no side effects.