Fabric js is not doing anything in the canvas

I try to use the Fabric js library to draw on the HTML5 canvas, but it does not doing anything. It is an Angular 19 project. This code should be enough to use Fabric?


ngAfterViewInit() {
this.log.debug(`[FractalComponent] ngAfterViewInit`)

const width = (this.fractalCanvasContainer.nativeElement as HTMLDivElement).clientWidth;
const height = (this.fractalCanvasContainer.nativeElement as HTMLDivElement).clientHeight;

console.log(`[FractalComponent] fractalCanvas ${JSON.stringify(this.fractalCanvas)}`)

this.canvas = new Canvas(this.fractalCanvas.nativeElement, {
width: width,
height: height,
backgroundColor: '#000000',
selection: false,
preserveObjectStacking: true,
isDrawingMode: true,
});
const text = new FabricText('Fabric.JS', {
left: 0,
top: 0,
cornerStrokeColor: 'blue',
cornerColor: 'lightblue',
cornerStyle: 'circle',
padding: 10,
transparentCorners: false,
cornerDashArray: [2, 2],
borderColor: 'orange',
borderDashArray: [3, 1, 3],
borderScaleFactor: 2,
});

const text1 = new FabricText('Hello Fabric', {
left: 50,
top: 30,
fontSize: 24,
fill: '#336699'
});
this.canvas.add(text1);

this.canvas.add(text);
this.canvas.centerObject(text);
this.canvas.setActiveObject(text);

console.log(`[FractalComponent] ${JSON.stringify(this.canvas)}`)
}


But the background color is not set, the text is not added. Nothing works.

Here is a minimal project for testing:

https://github.com/devent/test-frontend-fraction-angular

• fabric 6.7.1
• angular 19.2.0

Continue reading...