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();