I have an image i am getting from a url. I want to display this image in a canvas but when it gives me error image not found but my image is present in a folder and I have given its path correclty. Tell me why it is saying image not found?

I have this in Html:

 <canvas #canvas></canvas>

Here is my ponent Code:

export class drawingTestFormComponent{
@Input() public width = 495;
@Input() public height = 445;

private cx: CanvasRenderingContext2D;

public ngAfterViewInit() {
    const canvasEl: HTMLCanvasElement = this.canvas.nativeElement;
    this.cx = canvasEl.getContext('2d')!;
    let image = new Image();


    canvasEl.width = this.width;
    canvasEl.height = this.height;

    this.cx.lineWidth = 3;
    this.cx.lineCap = 'round';
    this.cx.strokeStyle = '#000';
    image.onload = ()=> {
        this.cx.drawImage(image, 0, 0, this.width, this.height);
    }
    image.src = "../../../../wwwroot/dist/assets/blackBoards/NCAA_mhalfcourt_500x410.png";

}

}

I have an image i am getting from a url. I want to display this image in a canvas but when it gives me error image not found but my image is present in a folder and I have given its path correclty. Tell me why it is saying image not found?

I have this in Html:

 <canvas #canvas></canvas>

Here is my ponent Code:

export class drawingTestFormComponent{
@Input() public width = 495;
@Input() public height = 445;

private cx: CanvasRenderingContext2D;

public ngAfterViewInit() {
    const canvasEl: HTMLCanvasElement = this.canvas.nativeElement;
    this.cx = canvasEl.getContext('2d')!;
    let image = new Image();


    canvasEl.width = this.width;
    canvasEl.height = this.height;

    this.cx.lineWidth = 3;
    this.cx.lineCap = 'round';
    this.cx.strokeStyle = '#000';
    image.onload = ()=> {
        this.cx.drawImage(image, 0, 0, this.width, this.height);
    }
    image.src = "../../../../wwwroot/dist/assets/blackBoards/NCAA_mhalfcourt_500x410.png";

}

}

• javascript
• angular
• canvas

1 Answer 1

Your code looks good the only issue I have found is that you have not defined the canvas variable.

@ViewChild("canvas") canvas;

WORKING DEMO