From 000855402b94ffba65ace72d2693afc9e613ac87 Mon Sep 17 00:00:00 2001
From: VladPorvin <porvinvlad.2019@gmail.com>
Date: Fri, 14 Jun 2024 19:18:27 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=B1=D0=BE=D0=BB=D0=B5=D0=B5=20=D1=87?=
 =?UTF-8?q?=D0=B5=D1=82=D0=BA=D0=BE=D0=B9=20=D0=BB=D0=B8=D0=BD=D0=B8=D0=B8?=
 =?UTF-8?q?=20=D0=BF=D1=83=D1=82=D0=B5=D0=BC=20=D1=81=D0=BA=D0=B5=D0=B9?=
 =?UTF-8?q?=D0=BB=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/usePaint/usePaint.demo.tsx |  2 +-
 src/hooks/usePaint/usePaint.ts       | 16 ++++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/hooks/usePaint/usePaint.demo.tsx b/src/hooks/usePaint/usePaint.demo.tsx
index 0756b196..974f0aef 100644
--- a/src/hooks/usePaint/usePaint.demo.tsx
+++ b/src/hooks/usePaint/usePaint.demo.tsx
@@ -46,7 +46,7 @@ const Demo = () => {
         </div>
       </div>
 
-      <canvas ref={ref} style={{ backgroundColor: 'white' }} />
+      <canvas width={400} height={400} ref={ref} style={{ backgroundColor: 'white' }} />
       <br />
 
       <button type='button' onClick={clearCanvas}>
diff --git a/src/hooks/usePaint/usePaint.ts b/src/hooks/usePaint/usePaint.ts
index ddf287ff..d26b6602 100644
--- a/src/hooks/usePaint/usePaint.ts
+++ b/src/hooks/usePaint/usePaint.ts
@@ -93,6 +93,22 @@ export const usePaint = ((...params: any[]) => {
     if (!element) return;
     contextRef.current = element.getContext('2d');
 
+    const dpr = window.devicePixelRatio;
+    const rect = element.getBoundingClientRect();
+
+    element.width = rect.width * dpr;
+    element.height = rect.height * dpr;
+
+    contextRef?.current?.scale(dpr, dpr);
+
+    element.style.width = `${rect.width}px`;
+    element.style.height = `${rect.height}px`;
+
+    if (contextRef.current) {
+      contextRef.current.imageSmoothingEnabled = true;
+      contextRef.current.imageSmoothingQuality = 'high';
+    }
+
     const onMouseDown = (event: MouseEvent) => {
       if (!contextRef.current) return;
       contextRef.current.beginPath();