diff --git a/wled00/data/liveview.htm b/wled00/data/liveview.htm
index 60e9fb03e..bc6b55369 100644
--- a/wled00/data/liveview.htm
+++ b/wled00/data/liveview.htm
@@ -16,10 +16,21 @@
     height: 100%;
     position: absolute;
   }
+  #canvas {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+  }
   </style>
   <script>
     var ws;
+    var c = document.getElementById('canvas');
+    var ctx = c.getContext('2d');
     var tmout = null;
+    function setCanvas() {
+      c.width  = document.documentElement.clientWidth;
+    }
+    setCanvas();
     function update() // via HTTP (/json/live)
     {
       if (document.hidden) {
@@ -36,20 +47,28 @@
         return res.json();
       })
       .then(json => {
+        var leddata = (data) => "#" + ((data.length > 6) ? data.substring(2) : data);
         var str = "linear-gradient(90deg,";
         var len = json.leds.length;
-        for (i = 0; i < len; i++) {
-          var leddata = json.leds[i];
-          if (leddata.length > 6) leddata = leddata.substring(2);
-          str += "#" + leddata;
-          if (i < len -1) str += ","
+        if (typeof ctx === "object") { //canvas support
+          setCanvas();
+          ctx.clearRect(0, 0, c.width, c.height);
+          for (i = 0; i < len; i++) {
+            ctx.fillStyle = leddata(json.leds[i]);
+            ctx.fillRect ( i * c.width / len, 0, c.width, c.height);
+          }
+        } else { //fallback to gradient method
+          for (i = 0; i < len; i++) {
+            str += leddata(json.leds[i]) + ((i < len -1) ? "," : "");
+          }
+          str += ")";
+          document.getElementById("canv").style.background = str;
         }
-        str += ")";
-        document.getElementById("canv").style.background = str;
         clearTimeout(tmout);
         tmout = setTimeout(update, 40);
       })
       .catch(function (error) {
+        console.error("Peek HTTP error:",error);
         clearTimeout(tmout);
         tmout = setTimeout(update, 2500);
       })
@@ -86,15 +105,24 @@
           if (toString.call(e.data) === '[object ArrayBuffer]') {
             let leds = new Uint8Array(event.data);
             if (leds[0] != 76) return; //'L'
-            let str = "linear-gradient(90deg,";
             let len = leds.length;
             let start = leds[1]==2 ? 4 : 2; // 1 = 1D, 2 = 1D/2D (leds[2]=w, leds[3]=h)
-            for (i = start; i < len; i+=3) {
-              str += `rgb(${leds[i]},${leds[i+1]},${leds[i+2]})`;
-              if (i < len -3) str += ","
+            let rgb = (i) => `rgb(${leds[i]},${leds[i+1]},${leds[i+2]})`;
+            if (typeof ctx === "object") { //canvas support
+              setCanvas();
+              ctx.clearRect(0, 0, c.width, c.height);
+              for (i = start; i < len; i+=3) {
+                ctx.fillStyle = rgb(i);
+                ctx.fillRect ( (i - start) * c.width / (len - start), 0, c.width, c.height);
+              }
+            } else { //fallback to gradient method
+              let str = "linear-gradient(90deg,";
+              for (i = start; i < len; i+=3) {
+                str += rgb(i) + ((i < len -3) ? "," : "");
+              }
+              str += ")";
+              document.getElementById("canv").style.background = str;
             }
-            str += ")";
-            document.getElementById("canv").style.background = str;
           }
         } catch (err) {
           console.error("Peek WS error:",err);
@@ -104,6 +132,6 @@
   </script>
 </head>
 <body onload="S()">
-  <div id="canv"></div>
+  <div id="canv"><canvas id="canvas"></canvas></div>
 </body>
-</html>
\ No newline at end of file
+</html>
