I’ve been trying to animate some items on canvas in Angular v5.2.10 by using canvas on a single component and been having problems with requestAnimationFrame.
For the first 4000 frames that are logged in console.log() the animation runs smoothly. After 8000 frames the app crashes. I’ve generated a simple app with angula cli v1.6.7 and added this component and this still crashes the app after 8000 frames logged.
I’m new to canvas and ran this app in Vanillajs and it was fine. Is there anything I’m missing when animating canvas on Angular?
I appreciate any suggestions. Cheers!
Here’s the code to my components.
animation.component.ts:
@ViewChild('myCanvas') canvas: ElementRef;
public ctx: CanvasRenderingContext2D;
width: number = 320;
height: number = 480;
frames: number = 0;
ngAfterViewInit(){
this.main();
}
main(){
this.ctx = <HTMLCanvasElement>this.canvas.nativeElement).getContext('2d');
// run Game
this.run();
}
run(){
this.update();
this.render();
requestAnimationFrame(()=> this.run());
}
update(){
console.log(this.frames);
this.frames++;
}
render(){
// Image would render here
}
animation.component.html
<canvas
#myCanvas width={{width}} height={{height}}></canvas>
Update: I’ve tested this with Heap snapshot to check for memory leaks but no change happens when the app is at frame 0 and frame 5000