Fabric js is not doing anything in the canvas

Question

I tried to use the Fabric.js library to draw on the HTML5 canvas, but it does not do 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

Edit: after removing the style background from the css, the result looks like this:

Then if I click on the canvas:

Maybe it's a Firefox problem. In Chrome is looks Ok now:

Firefox: 141.0.3 (64-bit) Chromium: Version 139.0.7258.66 (Official Build) for Linux Mint (64-bit)

any console error? Can you try Navigate to the page’s Page Info → Permissions, look for “Extract Canvas Data”, and allow it — Ramesh Rajendran
– Ramesh Rajendran, Commented Aug 25 at 13:01
I do not know what this is. Is this related to support.mozilla.org/en-US/kb/… — holz name
– holz name, Commented Aug 25 at 13:45

Naren Murali · Accepted Answer · 2025-08-25 10:18:03Z

0

I think the problem is setting the color on the HTML element canvas, instead remove it and specify it on the canvas definition itself.

Before:

<canvas #fractal_canvas id="fractal_canvas" width="1024" height="300" style="background: yellow"></canvas>

After:

<canvas #fractal_canvas id="fractal_canvas" width="1024" height="300"></canvas>

Fix in TS:

this.canvas = new Canvas(this.fractalCanvas.nativeElement, {
    width: width,
    height: height,
    backgroundColor: 'yellow',
    selection: false,
    preserveObjectStacking: true,
    isDrawingMode: true,
});

Github Repo

answered Aug 25 at 10:18

Naren Murali

66.2k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

holz name Aug 25 at 11:14

I removed the background and updated my question

holz name · Accepted Answer · 2025-08-25 14:24:19Z

0

The issue was some kind of hardware error with Firefox. After restarting Firefox (close the app and open again) it works. See also the bug report https://github.com/fabricjs/fabric.js/issues/10710

answered Aug 25 at 14:24

holz name

1137 bronze badges

Collectives™ on Stack Overflow

Fabric js is not doing anything in the canvas

2 Answers 2

Before:

After:

Fix in TS:

Github Repo

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Before:

After:

Fix in TS:

1 Comment

Comments

Related