In Fabric.js 6 with Angular 19 not working FabricImage class with fromUrl

import {Component, OnInit} from '@angular/core';
import {Canvas, FabricImage, Image, Rect} from 'fabric';

@Component({
selector: 'app-shirt',
imports: [],
templateUrl: './shirt.component.html',
styleUrl: './shirt.component.scss'
})

export class ShirtComponent implements OnInit {
canvas: Canvas | undefined;

ngOnInit(): void {
this.canvas = new Canvas('canvas', {
width: window.innerWidth,
height: window.innerHeight
});

// Add a rectangle to the canvas
const rectangle = new Rect({
left: 100,
top: 100,
fill: 'blue',
width: 200,
height: 100,
});
this.canvas.add(rectangle);

// Load an external image into the canvas
FabricImage.fromURL('images/custom/shirts/final/1.webp', function (img:any){
var img1 = img.set({
left: 300,
top: 100,
scaleX: 1.5,
scaleY: 1.5,
});
this.canvas.add(img1);
});

this.canvas.renderAll()
}
}


Angular Version: 19 Fabric.js Version: 6

Angular error

TS2683: 'this' implicitly has type 'any' because it does not have a type annotation. [plugin angular-compiler]

src/app/custom/products/shirt/shirt.component.ts:38:6:
38 │ this.canvas.add(img1);
╵ ~~~~


An outer value of 'this' is shadowed by this container.

src/app/custom/products/shirt/shirt.component.ts:31:61:
31 │ ...e.fromURL('images/custom/shirts/final/1.webp', function (img:any){


I also use arrow function in the fromUrl but same problem.

What is the actual solution for this.

Continue reading...