Optimize Brand Accent Component

src/app/components/brand-accent/brand-accent.ts

@@ -14,6 +14,8 @@ export class BrandAccent implements OnDestroy {
   private resizeObserver?: ResizeObserver;
 
   private canvasNativeSize: [number, number] = [0, 0];
+  private bgGradient!: CanvasGradient;
+  private gridGradient!: CanvasGradient;
 
   private animation: {
     id?: number;
@@ -59,20 +61,48 @@ export class BrandAccent implements OnDestroy {
 
     this.ctx.scale(dpr, dpr);
     this.updateAnimationInfo();
+
+    this.draw();
   }
 
   private updateAnimationInfo() {
-    this.canvasNativeSize = [this.canvasRef.nativeElement.clientWidth, this.canvasRef.nativeElement.clientHeight];
+    this.canvasNativeSize = [
+      this.canvasRef.nativeElement.clientWidth,
+      this.canvasRef.nativeElement.clientHeight,
+    ];
 
     this.animation.gridDimension = [
       Math.trunc(this.canvasNativeSize[0] / this.animation.gridSquareSize) + 3,
       Math.trunc(this.canvasNativeSize[1] / this.animation.gridSquareSize) + 3,
     ];
+
+    this.cacheGradients();
+  }
+
+  private cacheGradients() {
+    let w = this.canvasNativeSize[0];
+    let h = this.canvasNativeSize[1];
+
+    this.bgGradient = this.ctx.createLinearGradient(0, 0, w, h);
+    this.bgGradient.addColorStop(0, 'oklch(1 0 0 / 0.6)');
+    this.bgGradient.addColorStop(1, 'oklch(0.7938 0.1292 47.77 / 0.6)');
+
+    this.gridGradient = this.ctx.createLinearGradient(0, 0, w, h);
+    this.gridGradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
+    this.gridGradient.addColorStop(1, 'rgba(0, 0, 0, 0.2)');
   }
 
   private animate = (currentTime: number) => {
     this.animation.id = requestAnimationFrame(this.animate);
 
+    const canvas = this.canvasRef.nativeElement;
+    if (
+      canvas.clientWidth !== this.canvasNativeSize[0] ||
+      canvas.clientHeight !== this.canvasNativeSize[1]
+    ) {
+      return;
+    }
+
     this.update(currentTime);
     this.draw();
   };
@@ -89,42 +119,49 @@ export class BrandAccent implements OnDestroy {
     this.ctx.clearRect(0, 0, this.canvasNativeSize[0], this.canvasNativeSize[1]);
     this.ctx.globalCompositeOperation = 'source-over';
 
-    const linearGradient = this.ctx.createLinearGradient(0, 0, this.canvasNativeSize[0], this.canvasNativeSize[1]);
-
-    linearGradient.addColorStop(0, 'oklch(1 0 0 / 0.6)');
-    linearGradient.addColorStop(1, 'oklch(0.7938 0.1292 47.77 / 0.6)');
-
-    this.ctx.fillStyle = linearGradient;
+    this.ctx.fillStyle = this.bgGradient;
     this.ctx.fillRect(0, 0, this.canvasNativeSize[0], this.canvasNativeSize[1]);
 
     this.ctx.globalCompositeOperation = 'multiply';
 
-    const gridGradient = this.ctx.createLinearGradient(0, 0, this.canvasNativeSize[0], this.canvasNativeSize[1]);
-    gridGradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
-    gridGradient.addColorStop(1, 'rgba(0, 0, 0, 0.2)');
-
     this.ctx.beginPath();
     this.ctx.lineWidth = 2;
-    this.ctx.strokeStyle = gridGradient;
+    this.ctx.strokeStyle = this.gridGradient;
     this.ctx.lineCap = 'round';
 
     const lineRenderMargin = this.animation.gridSquareSize * 2;
 
-    const xOffset = (this.canvasNativeSize[0] - this.animation.gridDimension[0] * this.animation.gridSquareSize) / 2;
-    const yOffset = (this.canvasNativeSize[1] - this.animation.gridDimension[1] * this.animation.gridSquareSize) / 2;
+    const xOffset =
+      (this.canvasNativeSize[0] - this.animation.gridDimension[0] * this.animation.gridSquareSize) /
+      2;
+    const yOffset =
+      (this.canvasNativeSize[1] - this.animation.gridDimension[1] * this.animation.gridSquareSize) /
+      2;
     const movingOffset = -(this.animation.gridSquareSize * this.animation.progress);
 
     for (let y = 0; y < this.animation.gridDimension[1]; y++) {
-      this.ctx.moveTo(-lineRenderMargin, y * this.animation.gridSquareSize + yOffset + movingOffset);
-      this.ctx.lineTo(this.canvasNativeSize[0] + lineRenderMargin, y * this.animation.gridSquareSize + yOffset + movingOffset);
+      this.ctx.moveTo(
+        -lineRenderMargin,
+        y * this.animation.gridSquareSize + yOffset + movingOffset,
+      );
+      this.ctx.lineTo(
+        this.canvasNativeSize[0] + lineRenderMargin,
+        y * this.animation.gridSquareSize + yOffset + movingOffset,
+      );
     }
 
     for (let x = 0; x < this.animation.gridDimension[0]; x++) {
-      this.ctx.moveTo(x * this.animation.gridSquareSize + xOffset + movingOffset, -lineRenderMargin);
-      this.ctx.lineTo(x * this.animation.gridSquareSize + xOffset + movingOffset, this.canvasNativeSize[1] + lineRenderMargin);
+      this.ctx.moveTo(
+        x * this.animation.gridSquareSize + xOffset + movingOffset,
+        -lineRenderMargin,
+      );
+      this.ctx.lineTo(
+        x * this.animation.gridSquareSize + xOffset + movingOffset,
+        this.canvasNativeSize[1] + lineRenderMargin,
+      );
     }
 
-    this.ctx.stroke()
+    this.ctx.stroke();
   }
 
   ngOnDestroy() {