added proper sizing/resizing of stream images with new layout

static/css/style.css

@@ -31,12 +31,12 @@
     flex-basis: 85%;
 }
 
-.stream-canvas {
-    flex-basis: 90%;
-    align-self: center;
+.debug-img-div {
+    flex-basis: 30%;
+    align-self: stretch;
+    
 }
 
 .debug-img {
-    flex-basis: 30%;
-    align-self: stretch;
+    max-width: 100%;
 }

static/js/stream.js

@@ -41,6 +41,7 @@ let watchAreas = [];
 
 document.addEventListener("DOMContentLoaded", function(){
     canvas = document.getElementById("canvas");
+
     ctx = canvas.getContext("2d");
     src = document.getElementById("current_color_stream");
     img = new Image();
@@ -72,7 +73,13 @@ document.addEventListener("DOMContentLoaded", function(){
     });
 });
 
+window.addEventListener('resize', draw);
+
 function draw(){
+    contentDiv = document.getElementById("content")
+    var rect = contentDiv.getBoundingClientRect();
+    canvas.width = Math.floor(rect.width * 0.9);
+    canvas.height = (img.height / img.width) * canvas.width;
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     drawImage();
     watchAreas.forEach(watchArea => watchArea.draw(ctx));
@@ -80,7 +87,7 @@ function draw(){
 }
 
 function drawImage(){
-    ctx.drawImage(img, 0, 0)
+    ctx.drawImage(img, 0, 0, ctx.canvas.width, ctx.canvas.height)
 }
 
 function update() {

templates/stream.html

@@ -3,18 +3,20 @@
 <script src="/static/js/stream.js"></script>
 {{end}}
 {{define "content"}}
-<div class="flex-column">
-    <!--<canvas class="stream-canvas" id="canvas">Not supported</canvas>-->
-    <img class="stream-canvas" src="{{ .GetCurrentColorURL }}" id="current_color_stream" >
+<div class="flex-column" id="content">
+    <div class="stream-canvas-div">
+        <img class="stream-canvas" src="{{ .GetCurrentColorURL }}" id="current_color_stream" hidden>
+        <canvas class="stream-canvas" id="canvas">Not supported</canvas>
+    </div>
     <div class="flex-row">
-        <div class="debug-img">
-            <img src="{{ .GetPreviousURL }}">
+        <div class="debug-img-div">
+            <img src="{{ .GetPreviousURL }}" class="debug-img">
         </div>
-        <div class="debug-img">
-            <img src="{{ .GetDebugURL }}">
+        <div class="debug-img-div">
+            <img src="{{ .GetDebugURL }}" class="debug-img">
         </div>
-        <div class="debug-img">
-            <img src="{{ .GetCurrentURL }}">
+        <div class="debug-img-div">
+            <img src="{{ .GetCurrentURL }}" class="debug-img">
         </div>
     </div>
     <form action="/addWatchArea" method="GET" id="newWatchAreaForm">