Add Renderer Scale to Brand Accent

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

@@ -28,6 +28,7 @@ export class BrandAccent implements OnDestroy {
 
   drawGrid = input<boolean>(true);
 
+  private bgRendererScale = 1;
   private canvasNativeSize: [number, number] = [0, 0];
   private bgGradient!: CanvasGradient;
   private gridGradient!: CanvasGradient;
@@ -123,8 +124,8 @@ export class BrandAccent implements OnDestroy {
       canvas.height = height * dpr;
 
       if (this.offscreenCanvas) {
-        this.offscreenCanvas.width = width;
-        this.offscreenCanvas.height = height;
+        this.offscreenCanvas.width = width * this.bgRendererScale;
+        this.offscreenCanvas.height = height * this.bgRendererScale;
       }
 
       this.canvasNativeSize = [width, height];
@@ -153,7 +154,12 @@ export class BrandAccent implements OnDestroy {
     if (w === 0 || h === 0) return;
 
     if (!isDark) {
-      this.bgGradient = this.ctx.createLinearGradient(0, 0, w, h);
+      this.bgGradient = this.ctx.createLinearGradient(
+        0,
+        0,
+        w * this.bgRendererScale,
+        h * this.bgRendererScale,
+      );
       this.bgGradient.addColorStop(0, 'oklch(1 0 0 / 0.6)');
       this.bgGradient.addColorStop(1, 'oklch(0.7938 0.1292 47.77 / 0.6)');
     }
@@ -177,15 +183,15 @@ export class BrandAccent implements OnDestroy {
     const h = this.canvasNativeSize[1];
     if (w === 0 || h === 0) return;
 
-    this.offscreenCtx.clearRect(0, 0, w, h);
+    this.offscreenCtx.clearRect(0, 0, w * this.bgRendererScale, h * this.bgRendererScale);
     this.offscreenCtx.globalCompositeOperation = 'source-over';
 
     if (!isDark) {
       this.offscreenCtx.fillStyle = this.bgGradient;
-      this.offscreenCtx.fillRect(0, 0, w, h);
+      this.offscreenCtx.fillRect(0, 0, w * this.bgRendererScale, h * this.bgRendererScale);
     } else {
       this.offscreenCtx.fillStyle = 'oklch(0.1776 0 0)';
-      this.offscreenCtx.fillRect(0, 0, w, h);
+      this.offscreenCtx.fillRect(0, 0, w * this.bgRendererScale, h * this.bgRendererScale);
 
       const ellipseDimension = [Math.max(100, w * 0.9421875), Math.max(200 / 3, h * (203 / 120))];
 
@@ -196,13 +202,17 @@ export class BrandAccent implements OnDestroy {
         Math.min(780, Math.min(ellipseDimension[0], ellipseDimension[1]) * 0.6) /
         this.rendererScale;
 
-      this.offscreenCtx.filter = `blur(${blurScale}px)`;
+      this.offscreenCtx.filter = `blur(${blurScale * this.bgRendererScale}px)`;
 
       this.offscreenCtx.beginPath();
       this.offscreenCtx.ellipse(
-        ellipseX, ellipseY,
-        ellipseDimension[0] / 2, ellipseDimension[1] / 2,
-        0, 0, 2 * Math.PI,
+        ellipseX * this.bgRendererScale,
+        ellipseY * this.bgRendererScale,
+        (ellipseDimension[0] / 2) * this.bgRendererScale,
+        (ellipseDimension[1] / 2) * this.bgRendererScale,
+        0,
+        0,
+        2 * Math.PI,
       );
       this.offscreenCtx.fillStyle = 'oklch(0.2547 0.0913 29.02)';
       this.offscreenCtx.fill();
@@ -234,7 +244,13 @@ export class BrandAccent implements OnDestroy {
       this.ctx.globalCompositeOperation = 'source-over';
 
       this.ctx.imageSmoothingEnabled = false;
-      this.ctx.drawImage(this.offscreenCanvas, 0, 0);
+      this.ctx.drawImage(
+        this.offscreenCanvas,
+        0,
+        0,
+        this.canvasNativeSize[0],
+        this.canvasNativeSize[1],
+      );
 
       // this.ctx.drawImage(this.offscreenCanvas, 0, 0, this.canvasNativeSize[0], this.canvasNativeSize[1]);
     }