diff --git a/examples/web/index.css b/examples/web/index.css
index 4f046ba50f59189f42c08b2263b348a5a084c5d5..decfc4d4079424e0ee6838a3700cf630f7e1fce7 100644
--- a/examples/web/index.css
+++ b/examples/web/index.css
@@ -92,7 +92,7 @@ p {
     border: 2px solid #50cb93;
     font-size: 0px;
     margin-top: 78px;
-    max-width: 660px;
+    max-width: 320px;
     padding: 8px 8px 8px 8px;
 }
 
diff --git a/examples/web/index.html b/examples/web/index.html
index 50bfe5e4e636b25fbe0716db134ead0d907e7357..faa20ad4ca8c3c2eafbcfd30e29afb08fb62382b 100644
--- a/examples/web/index.html
+++ b/examples/web/index.html
@@ -20,7 +20,7 @@
                     <img class="large" src="res/minimise.svg" alt="minimise" />
                 </span>
                 <div class="canvas-frame">
-                    <canvas id="chip-canvas" class="canvas" width="160" height="144"></canvas>
+                    <canvas id="chip-canvas" class="canvas" width="320" height="288"></canvas>
                 </div>
             </div>
         </div>
diff --git a/examples/web/index.ts b/examples/web/index.ts
index 8d4d0a3779367c8409648a9af5156443570e9958..076502dfe0c7c53608e38df75c423ac908904c33 100644
--- a/examples/web/index.ts
+++ b/examples/web/index.ts
@@ -699,8 +699,8 @@ const clearCanvas = async (
             img.src = image;
         });
         const [imgWidth, imgHeight] = [
-            img.width * imageScale,
-            img.height * imageScale
+            img.width * imageScale * window.devicePixelRatio,
+            img.height * imageScale * window.devicePixelRatio
         ];
         const [x0, y0] = [
             state.canvasScaled.width / 2 - imgWidth / 2,