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

@Component({
  selector: 'app-shirt',
  imports: [],
  templateUrl: './shirtponent.html',
  styleUrl: './shirtponent.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/shirtponent.ts:38:6:
  38 │       this.canvas.add(img1);
     ╵       ~~~~

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

src/app/custom/products/shirt/shirtponent.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.

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

@Component({
  selector: 'app-shirt',
  imports: [],
  templateUrl: './shirtponent.html',
  styleUrl: './shirtponent.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/shirtponent.ts:38:6:
  38 │       this.canvas.add(img1);
     ╵       ~~~~

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

src/app/custom/products/shirt/shirtponent.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.

• javascript
• angular
• typescript
• fabricjs

1 Answer 1

Please convert the function which has its own (this) inside this canvas does not exist, instead use an arrow function which takes the scope of the parent, where canvas exists.

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