How To Get Started Using Angular’s Canvas Animations

We’ll start with some 2D visuals. It’s moving some blocks around on the screen in this scenario. So, in this essay, I’ll teach you how to use HTML5 Canvas and JavaScript to create and animate objects. I’ll also go through some performance-enhancing strategies. Who knows, it could come in helpful at some point in the future.

Using Canvas as a Tool

To begin, we’ll need to include a canvas element in our HTML. We’ll also provide the element a reference variable so that we can refer to it from the component class:

<canvas #canvas width="500" height="200"></canvas>

We’ll have access to the Canvas DOM node, as well as its drawing context, once the component has been initialised:

this.ctx = this.canvas.nativeElement.getContext('2d');

We can use the normal canvas context API to draw on it after we have a canvas context in the component class. To draw a square, we can use fillRect(). It creates a filled rectangle with the current fill style’s colour.

ctx.fillRect(x, y, width, height);

To draw a little aqua rectangle with a 5 pixel side, follow these steps:

this.ctx.fillStyle = 'aqua';
this.ctx.fillRect(0, 0, 5, 5);

We could use strokeRect() to draw a border around the square:

this.ctx.strokeRect(z * x, z * y, z, z);

Let’s make a Square class with a method for drawing squares:

square.ts

export class Square {
    private color = 'aqua';
    private x = 0;
    private y = 0;
    private z = 30;
  
    constructor(private ctx: CanvasRenderingContext2D) {}
  
    moveRight() {
      this.x++;
      this.draw();
    }
  
    private draw() {
      this.ctx.fillStyle = this.color;
      this.ctx.fillRect(this.z * this.x, this.z * this.y, this.z, this.z);
    }
  }

The component’s initial code is as follows:

app.component.ts

import { Component, ViewChild, ElementRef, OnInit, NgZone } from '@angular/core';
import { Square } from './square';

@Component({
  selector: 'app-root',
  template: `
  <div>
    <canvas #canvas width="600" height="200" style="background-color: black;"></canvas> <br>
    <button class="set_btn" (click)="start()">Play</button>
  </div>
`,
  styles: ['canvas  {border-style: ridge;}']
})
export class AppComponent implements OnInit {
  @ViewChild('canvas', { static: true })
  canvas!: ElementRef<HTMLCanvasElement>;
  ctx: CanvasRenderingContext2D | any;
  id: any;
  interval: any;
  squareArray: Square[] = [];

  constructor(private ngZone: NgZone) { }

  ngOnInit() {
    this.ctx = this.canvas.nativeElement.getContext('2d');
    this.ctx.fillStyle = 'aqua';
    this.ngZone.runOutsideAngular(() => this.click());
    setInterval(() => {
      this.click();
    }, 200);
  }

  click() {
    this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
    this.squareArray.forEach((square: Square) => {
      square.moveRight();
    });
    this.id = requestAnimationFrame(() => this.click);
  }

  start() {
    const square = new Square(this.ctx);
    this.squareArray = this.squareArray.concat(square);
  }

  ngOnDestroy() {
    clearInterval(this.interval);
    cancelAnimationFrame(this.id);
  }
}

As we can see, pressing the button causes a square to move from left to right.

Conclusion

You learnt how to use the HTML5 Canvas and its 2D graphics environment in this article. Finally, we were able to animate many items on the canvas after I demonstrated how to design simple shapes. We learnt how to make an animation loop that maintains track of the things on the screen using setInterval.

We also learnt how to use requestAnimationFrame to optimise animations and how to run outside of the “Angular Zone.”