I am attempting to create a circle on a canvas using Angular. I have followed the necessary steps and have a basic understanding of how everything works. Although my IDE is not showing any errors, when I run the code, the console displays an error stating "this.circleApp is undefined". I have made multiple attempts to access properties of the circleApp Object where I plan to store most of my application's data and logic, such as calculating radians from degrees to determine the coordinates of my shapes. As a beginner in Angular and TypeScript, I feel like I am overlooking something obvious. Any guidance or links to relevant documentation would be greatly appreciated. Here is an illustration of where I believe the issue lies
Currently, I am only assigning a random number to the "degrees" property, but I plan to connect it to an input later on.
import { ViewChild, Component, OnInit, ElementRef } from "@angular/core";
import { CircleApp } from "./circleApp";
@Component({
selector: "app-make-circle",
templateUrl: "./make-circle.component.html",
styleUrls: ["./make-circle.component.css"]
})
export class MakeCircleComponent implements OnInit {
circleApp: CircleApp = {
degrees: 3,
degreesToRadiansFlipped: function(degree) {
return (-degree * Math.PI) / 180;
},
radian: this.circleApp.degreesToRadiansFlipped(this.circleApp.degrees),
x: Math.cos(this.circleApp.radian * 200 + 500),
y: Math.sin(this.circleApp.radian * 200 + 500)
};
@ViewChild("myCanvas") myCanvas: ElementRef;
public context: CanvasRenderingContext2D;
constructor() {}
ngOnInit() {}
ngAfterViewInit(): void {
this.context = (this.myCanvas
.nativeElement as HTMLCanvasElement).getContext("2d");
this.draw();
}
private draw() {
this.context.beginPath();
this.context.arc(500, 300, 200, 0, Math.PI * 2);
this.context.moveTo(500, 300);
this.context.lineTo(this.circleApp.x, this.circleApp.y);
this.context.stroke();
}
}