fix: GH-47 Fix retina display

Bitnoise · Oct 25, 2023 · 5cc961c · 5cc961c
1 parent eda2c7c
commit 5cc961c
Showing 1 changed file with 8 additions and 5 deletions.
diff --git a/src/components/Calendar/Header/Header.tsx b/src/components/Calendar/Header/Header.tsx
@@ -1,5 +1,5 @@
 import { FC, useCallback, useEffect, useRef } from "react";
-import { boxHeight, headerHeight, screenWidthMultiplier, canvasHeaderWrapperId } from "@/constants";
+import { headerHeight, screenWidthMultiplier, canvasHeaderWrapperId } from "@/constants";
 import { useCalendar } from "@/context/CalendarProvider";
 import { useLanguage } from "@/context/LocaleProvider";
 import { drawHeader } from "@/utils/drawHeader/drawHeader";
@@ -14,8 +14,13 @@ const Header: FC<HeaderProps> = ({ zoom, topBarWidth }) => {
 
   const handleResize = useCallback(
     (ctx: CanvasRenderingContext2D) => {
-      ctx.canvas.width = window.innerWidth * screenWidthMultiplier;
-      ctx.canvas.height = headerHeight + 1;
+      const width = window.innerWidth * screenWidthMultiplier;
+      const height = headerHeight + 1;
+      ctx.canvas.width = width * window.devicePixelRatio;
+      ctx.canvas.height = height * window.devicePixelRatio;
+      ctx.canvas.style.width = width + "px";
+      ctx.canvas.style.height = height + "px";
+      ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
 
       drawHeader(ctx, zoom, cols, startDate, week, dayOfYear);
     },
@@ -39,8 +44,6 @@ const Header: FC<HeaderProps> = ({ zoom, topBarWidth }) => {
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
 
-    ctx.canvas.height = boxHeight + headerHeight;
-
     handleResize(ctx);
   }, [date, zoom, handleResize]);