can draw rects on the canvas

static/js/stream.js

@@ -1,5 +1,7 @@
-
+let isDrawing = false;
-
+let x0 = 0;
+let y0 = 0;
+let rectangle = null
 
 document.addEventListener("DOMContentLoaded", function(){
     const canvas = document.getElementById("canvas");
@@ -8,6 +10,34 @@ document.addEventListener("DOMContentLoaded", function(){
     var img = new Image();
     img.src = src.src;
     img.onload = function() {
-        ctx.drawImage(img, 0, 0);
+        draw(ctx, img);
-    }
+    };
-});
+
+    canvas.addEventListener("mousedown", e => {
+        x0 = e.offsetX;
+        y0 = e.offsetY;
+        isDrawing = true;
+    });
+
+    canvas.addEventListener("mousemove", e => {
+        if(isDrawing === true) {
+            draw(ctx, img);
+            x1 = e.offsetX;
+            y1 = e.offsetY;
+            ctx.beginPath();
+            ctx.rect(x0,y0,x1-x0,y1-y0);
+            ctx.stroke();
+        }
+    });
+
+    canvas.addEventListener("mouseup", e => {
+        if(isDrawing === true) {
+            
+        }
+        isDrawing = false;
+    });
+});
+
+function draw(ctx, img){
+    ctx.drawImage(img, 0, 0)
+}