From a3b4bef8212c8fa7dfa02614611751230eb64576 Mon Sep 17 00:00:00 2001
From: v6ctor <victorsumano27@gmail.com>
Date: Thu, 7 Dec 2023 13:55:31 -0500
Subject: [PATCH] refactor: improved canvas resolution

---
 index.html | 7 ++++---
 styles.css | 2 ++
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index c0c20a7..05b5c7e 100644
--- a/index.html
+++ b/index.html
@@ -114,7 +114,7 @@ <h1><a class="navbar-brand" href="https://algoart.org"><span>AlgoArt</span><span
             </div>
             <!-- Canvas -->
             <div class="canvas_wrapper">
-                <canvas id="myCanvas" class="canvas" width="600" height="600">Your browser does not support the HTML5 canvas
+                <canvas id="myCanvas" class="canvas" width="2400" height="2400">Your browser does not support the HTML5 canvas
                     tag.
                 </canvas>
             </div>
@@ -301,9 +301,10 @@ <h5 style="font-weight: bold">Credits</h5>
         // Canvas
         var c = document.getElementById("myCanvas");
         var ctx = c.getContext("2d");
+        ctx.scale(4, 4);
         // Dimensions
-        var width = c.width;
-        var height = c.height;
+        var width = c.width/4;
+        var height = c.height/4;
     </script>
     <script src="algDots.js"></script>
     <script src="algDots_params.js"></script>
diff --git a/styles.css b/styles.css
index d94f992..31112cc 100644
--- a/styles.css
+++ b/styles.css
@@ -124,6 +124,8 @@
 
 /* Style Canvas */
 .canvas {
+    width: 600px;
+    height: 600px;
     border: solid 1px var(--canvas_border_color);
     /*border-radius: 10px;*/
     /*box-shadow: rgba(6, 24, 44, 0.4) 0 0 0 2px, rgba(6, 24, 44, 0.65) 0 4px 6px -1px, rgba(255, 255, 255, 0.08) 0 1px 0 inset;*/