From ed1e798ab299617bf3b3253171cec490201bef11 Mon Sep 17 00:00:00 2001
From: arifcakiroglu <cakirogluarif@gmail.com>
Date: Fri, 26 Jan 2024 10:44:18 +0300
Subject: [PATCH] fix: add retina display support

#80
---
 src/components/Calendar/Grid/Grid.tsx     | 10 ++++++++--
 src/components/Calendar/Header/Header.tsx | 10 ++++++++--
 src/utils/drawGrid/drawGrid.ts            |  2 ++
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/Calendar/Grid/Grid.tsx b/src/components/Calendar/Grid/Grid.tsx
index 04609997..ca0680da 100644
--- a/src/components/Calendar/Grid/Grid.tsx
+++ b/src/components/Calendar/Grid/Grid.tsx
@@ -17,7 +17,11 @@ const Grid = forwardRef<HTMLDivElement, GridProps>(function Grid(
 
   const handleResize = useCallback(
     (ctx: CanvasRenderingContext2D) => {
-      ctx.canvas.width = window.innerWidth * screenWidthMultiplier;
+      const canvasWidth = window.innerWidth * screenWidthMultiplier;
+
+      ctx.canvas.width = canvasWidth * window.devicePixelRatio;
+      ctx.canvas.style.width = canvasWidth + "px";
+
       drawGrid(ctx, zoom, rows, cols, startDate);
     },
     [cols, startDate, rows, zoom]
@@ -41,8 +45,10 @@ const Grid = forwardRef<HTMLDivElement, GridProps>(function Grid(
     canvas.style.letterSpacing = "1px";
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
+    const canvasHeight = rows * boxHeight + 1;
 
-    ctx.canvas.height = rows * boxHeight + 1;
+    ctx.canvas.height = canvasHeight * window.devicePixelRatio;
+    ctx.canvas.style.height = canvasHeight + "px";
 
     handleResize(ctx);
   }, [date, rows, zoom, handleResize]);
diff --git a/src/components/Calendar/Header/Header.tsx b/src/components/Calendar/Header/Header.tsx
index c04599ef..529da056 100644
--- a/src/components/Calendar/Header/Header.tsx
+++ b/src/components/Calendar/Header/Header.tsx
@@ -14,8 +14,14 @@ const Header: FC<HeaderProps> = ({ zoom, topBarWidth }) => {
 
   const handleResize = useCallback(
     (ctx: CanvasRenderingContext2D) => {
-      ctx.canvas.width = window.innerWidth * screenWidthMultiplier;
-      ctx.canvas.height = headerHeight + 1;
+      const canvasWidth = window.innerWidth * screenWidthMultiplier;
+      const canvasHeight = headerHeight + 1;
+
+      ctx.canvas.width = canvasWidth * window.devicePixelRatio;
+      ctx.canvas.height = canvasHeight * window.devicePixelRatio;
+      ctx.canvas.style.width = canvasWidth + "px";
+      ctx.canvas.style.height = canvasHeight + "px";
+      ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
 
       drawHeader(ctx, zoom, cols, startDate, week, dayOfYear);
     },
diff --git a/src/utils/drawGrid/drawGrid.ts b/src/utils/drawGrid/drawGrid.ts
index 7c921e22..42158125 100644
--- a/src/utils/drawGrid/drawGrid.ts
+++ b/src/utils/drawGrid/drawGrid.ts
@@ -11,6 +11,8 @@ export const drawGrid = (
   parsedStartDate: Day
 ) => {
   ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+  ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+
   const canvasWrapper = document.getElementById(canvasWrapperId);
   if (!canvasWrapper) return;