From 0a866387d1a6723992ee2a15b2d813b35bcec095 Mon Sep 17 00:00:00 2001
From: Andras Schmelczer <andras@schmelczer.dev>
Date: Tue, 27 Sep 2022 19:14:42 +0200
Subject: [PATCH] Support retina displays

---
 js/CanvasHandler.js | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/js/CanvasHandler.js b/js/CanvasHandler.js
index 7b1d525..2a9d5cc 100644
--- a/js/CanvasHandler.js
+++ b/js/CanvasHandler.js
@@ -11,8 +11,8 @@ class CanvasHandler {
 
   resize() {
     const rect = this.canvas.getBoundingClientRect();
-    this.canvas.width = rect.width;
-    this.canvas.height = rect.height;
+    this.canvas.width = rect.width * window.devicePixelRatio;
+    this.canvas.height = rect.height * window.devicePixelRatio;
   }
 
   fillCanvas(color) {
@@ -22,7 +22,14 @@ class CanvasHandler {
 
   drawCircle([x, y], radius, color) {
     this.context.beginPath();
-    this.context.arc(x, y, radius, 0, 2 * Math.PI, false);
+    this.context.arc(
+      x * window.devicePixelRatio,
+      y * window.devicePixelRatio,
+      radius * window.devicePixelRatio,
+      0,
+      2 * Math.PI,
+      false
+    );
     this.context.fillStyle = color;
     this.context.fill();
   }
@@ -32,9 +39,9 @@ class CanvasHandler {
   }
 
   get width() {
-    return this.canvas.width;
+    return this.canvas.width / window.devicePixelRatio;
   }
   get height() {
-    return this.canvas.height;
+    return this.canvas.height / window.devicePixelRatio;
   }
 }