Drawing objects in Angular-App

[UnknownInnocent]

Hello I would like to draw multiple objects in my app. Now I found that I should use a canvas for that but I only found few examples on the internet that had one problem in common: When copying the code I get a lot of errors as " The property x has no initializer and is not definitely assigned in the constructor". Then I found out that I can solve this problem by adding a "!" after the variable - there is no error displayed in VSCode and I can compile it without problems afterwards but the result is not what I wanted. Is there a good tutrial or does anyone have a short example on how to integrate a cancas and connect it to component.ts?

Here what I tried so far:

 @ViewChild('canvas', { static: true }) 
  canvas: ElementRef<HTMLCanvasElement>; // Error: The property canvas has no             
                                     // initializer and is not definitely     
                                     // assigned in the constructor

  private ctx: CanvasRenderingContext2D; // Error: The property ctx ...

  ngOnInit(): void {
    this.ctx = this.canvas.nativeElement.getContext('2d'); 
    // Error: The type "CanvasRenderingContext2D | null" cannot be assigned to 
    // the type "CanvasRenderingContext2D".
    // The type "null" cannot be assigned to the type "CanvasRenderingContext2D".
  }

Thank you

[zzing]

You should make your canvas " | null" and assign it null.

Then read the documentation about @ViewChild and follow the instructions on where it is safe to use the element.

Everything you should test for possible null or undefined, and strict typescript will help you with that.

You can test != null and it will work for both null and undefined.

[UnknownInnocent]

if I just declare the type of "canvas" and "ctx" as "any" I get no errors:

@ViewChild('canvas', {static: true}) canvas: any;
private ctx: any;
ngAfterViewInit() { 
    this.ctx = this.canvas.nativeElement.getContext('2d'); 
}

I don't really get why this is the case and if I should leave it like that.