From de5dd916f291e574c5834d5675b99d225b847761 Mon Sep 17 00:00:00 2001
From: kylesmith090502 <me@yskkyle.com>
Date: Tue, 26 Mar 2024 14:32:33 -0400
Subject: [PATCH] Applied scale to canvas to prevent blurry images.

---
 packages/freezeframe/src/index.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/freezeframe/src/index.ts b/packages/freezeframe/src/index.ts
index 3ed563b..aba55aa 100644
--- a/packages/freezeframe/src/index.ts
+++ b/packages/freezeframe/src/index.ts
@@ -124,11 +124,12 @@ class Freezeframe {
   private _process(freeze: Freeze): Promise<Freeze> {
     return new Promise((resolve) => {
       const { $canvas, $image, $container } = freeze;
+      const scale = devicePixelRatio;
       const { width, height } = $image.getClientRects()[0];
-      const clientWidth = Math.ceil(width);
-      const clientHeight = Math.ceil(height);
+      const clientWidth = Math.ceil(width * scale);
+      const clientHeight = Math.ceil(height * scale);
 
-      $canvas.style.width =  `${width}px`;
+      $canvas.style.width = `${width}px`;
       $canvas.style.height = `${height}px`;
       $canvas.setAttribute('width', clientWidth.toString());
       $canvas.setAttribute('height', clientHeight.toString());