switched a Rectangle class in javascript

static/js/stream.js

@@ -4,16 +4,40 @@ let img = null;
 
 let isDrawing = false;
 
-// rectangle 
-let x0 = 0;
-let y0 = 0;
-let x1 = 0;
-let y1 = 0;
+class Rectangle {
+    constructor(name, x0, y0, x1, y1, R, G, B) {
+        this.name = name;
+        this.x0 = x0;
+        this.y0 = y0;
+        this.x1 = x1;
+        this.y1 = y1;
+        this.R = R;
+        this.G = G;
+        this.B = B;
+    }
 
-// color
-let R = 0;
-let G = 0;
-let B = 0;
+    draw(ctx) {
+        ctx.beginPath();
+        ctx.lineWidth = "3";
+        ctx.strokeStyle = "rgb(" + this.R + ", " + this.G + ", " + this.B + ")";
+        ctx.rect(
+            this.x0,
+            this.y0,
+            this.x1 - this.x0,
+            this.y1 - this.y0
+        );
+        ctx.stroke();
+    }
+}
+
+let rectangle = new Rectangle(
+    "", 
+    0, 0,
+    0, 0,
+    0, 0, 0
+)
+
+let rectangles = [];
 
 document.addEventListener("DOMContentLoaded", function(){
     canvas = document.getElementById("canvas");
@@ -26,15 +50,15 @@ document.addEventListener("DOMContentLoaded", function(){
     };
 
     canvas.addEventListener("mousedown", e => {
-        x0 = e.offsetX;
-        y0 = e.offsetY;
+        rectangle.x0 = e.offsetX;
+        rectangle.y0 = e.offsetY;
         isDrawing = true;
     });
 
     canvas.addEventListener("mousemove", e => {
         if(isDrawing === true) {
-            x1 = e.offsetX;
-            y1 = e.offsetY;
+            rectangle.x1 = e.offsetX;
+            rectangle.y1 = e.offsetY;
             draw();
             update();
         }
@@ -51,21 +75,13 @@ document.addEventListener("DOMContentLoaded", function(){
 function draw(){
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     drawImage();
-    drawRectangle();
+    rectangle.draw(ctx);
 }
 
 function drawImage(){
     ctx.drawImage(img, 0, 0)
 }
 
-function drawRectangle(){
-    ctx.beginPath();
-    ctx.lineWidth = "5";
-    ctx.strokeStyle = "rgb(" + R + ", " + G + ", " + B + ")";
-    ctx.rect(x0,y0,x1-x0,y1-y0);
-    ctx.stroke();
-}
-
 function update() {
     var existingRow = document.getElementById("addWatchAreaRow")
     if (existingRow !== null) {
@@ -90,21 +106,21 @@ function submitNewArea(){
 }
 
 function updateRectInputs(){
-    document.getElementsByName("R")[0].value = R;
-    document.getElementsByName("G")[0].value = G;
-    document.getElementsByName("B")[0].value = B;
+    document.getElementsByName("R")[0].value = rectangle.R;
+    document.getElementsByName("G")[0].value = rectangle.G;
+    document.getElementsByName("B")[0].value = rectangle.B;
 
-    document.getElementsByName("x0")[0].value = x0;
-    document.getElementsByName("y0")[0].value = y0;
-    document.getElementsByName("x1")[0].value = x1;
-    document.getElementsByName("y1")[0].value = y1;
+    document.getElementsByName("x0")[0].value = rectangle.x0;
+    document.getElementsByName("y0")[0].value = rectangle.y0;
+    document.getElementsByName("x1")[0].value = rectangle.x1;
+    document.getElementsByName("y1")[0].value = rectangle.y1;
 }
 
-let changeR = function(elem){R = elem.value; draw();}
-let changeG = function(elem){G = elem.value; draw();}
+let changeR = function(elem){rectangle.R = elem.value; draw();}
+let changeG = function(elem){rectangle.G = elem.value; draw();}
 let changeB = function(elem){B = elem.value; draw();}
 
-let changeX0 = function(elem){x0 = elem.value; draw();}
-let changeY0 = function(elem){y0 = elem.value; draw();}
-let changeX1 = function(elem){x1 = elem.value; draw();}
-let changeY1 = function(elem){y1 = elem.value; draw();}
+let changeX0 = function(elem){rectangle.x0 = elem.value; draw();}
+let changeY0 = function(elem){rectangle.y0 = elem.value; draw();}
+let changeX1 = function(elem){rectangle.x1 = elem.value; draw();}
+let changeY1 = function(elem){rectangle.y1 = elem.value; draw();}