better image display in the canvas

Author: kalwalt

tools/NFT_Marker_Creator/index.html

@@ -13,7 +13,7 @@ <h2 class="title has-text-centered" id="title" href="#confidenceLevel">NFT Marke
       <button class="button is-fullwidth" id="generateBt" onclick="window.generate()" disabled>Generate</button>
     </div>
     <div class="tile is-ancestor"  id="wrapper">
-        <canvas class="tile" id="imageCanvas" style="width: auto; height: 120rem"></canvas>
+        <canvas class="tile" id="imageCanvas" ></canvas>
         <div class="spinner-container">
             <div class="spinner"></div>
         </div>

tools/NFT_Marker_Creator/index.js

@@ -208,11 +208,14 @@ function useJpeg(e) {
 function readImage(e) {
     reader.onload = function (event) {
 
-        var img = new Image();
+        const img = new Image();
         img.onload = function () {
-            var canvasEl = document.querySelector('#imageCanvas');
-            canvas.width = canvasEl.clientWidth;
-            canvas.height = canvasEl.clientHeight;
+            canvas.width = img.width;
+            canvas.height = img.height;
+
+            canvas.style.width = img.width > 1200 ? '1200px' : img.width + 'px';
+            canvas.style.height = img.height > 1200 ? '1200px' : img.height + 'px';
+
 
             hideCanvas.width = img.width;
             hideCanvas.height = img.height;