From 5cc961cadd561668717366c39d01598986e3e9b1 Mon Sep 17 00:00:00 2001
From: Piotr Baranek <piotr.b@bitnoi.se>
Date: Wed, 25 Oct 2023 14:59:40 +0200
Subject: [PATCH] fix: GH-47 Fix retina display

---
 src/components/Calendar/Header/Header.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/Calendar/Header/Header.tsx b/src/components/Calendar/Header/Header.tsx
index c04599e..6ba01d4 100644
--- 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]);