From 91f042e1bb042fee6bea6065df33f5017e9fee94 Mon Sep 17 00:00:00 2001
From: BroodjeAap <davidzessen@gmail.com>
Date: Sun, 12 Jul 2020 13:53:23 +0000
Subject: [PATCH] can draw rects on the canvas

---
 static/js/stream.js | 40 +++++++++++++++++++++++++++++++++++-----
 1 file changed, 35 insertions(+), 5 deletions(-)

diff --git a/static/js/stream.js b/static/js/stream.js
index 0d5909f..e4eec1f 100755
--- a/static/js/stream.js
+++ b/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);
-    }
-});
\ No newline at end of file
+        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)
+}
\ No newline at end of file