got canvas resizing working with the watcharea coordinates

static/js/stream.js

@@ -21,10 +21,10 @@ class WatchArea {
         ctx.lineWidth = "3";
         ctx.strokeStyle = "rgb(" + this.R + ", " + this.G + ", " + this.B + ")";
         ctx.rect(
-            this.x0,
+            this.x0 * (canvas.width / img.width),
-            this.y0,
+            this.y0 * (canvas.height / img.height),
-            this.x1 - this.x0,
+            (this.x1 - this.x0) * (canvas.width / img.width),
-            this.y1 - this.y0
+            (this.y1 - this.y0) * (canvas.height / img.height)
         );
         ctx.stroke();
     }
@@ -51,15 +51,16 @@ document.addEventListener("DOMContentLoaded", function(){
     };
 
     canvas.addEventListener("mousedown", e => {
-        watchArea.x0 = e.offsetX;
+        watchArea.x0 = Math.round(e.offsetX * (img.width / canvas.width));
-        watchArea.y0 = e.offsetY;
+        watchArea.y0 = Math.round(e.offsetY * (img.height / canvas.height));
         isDrawing = true;
     });
 
     canvas.addEventListener("mousemove", e => {
         if(isDrawing === true) {
-            watchArea.x1 = e.offsetX;
+            watchArea.x1 = Math.round(e.offsetX * (img.width / canvas.width));
-            watchArea.y1 = e.offsetY;
+            watchArea.y1 = Math.round(e.offsetY * (img.height / canvas.height));
+            console.log(watchArea.x1, watchArea.y1)
             draw();
             update();
         }
@@ -80,6 +81,7 @@ function draw(){
     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));