From 7e8dace346e26f96d3e1200cc4deeddb06e60a2a Mon Sep 17 00:00:00 2001
From: matbgn <mat.gh@bqn.ch>
Date: Fri, 24 Jun 2022 18:17:07 +0200
Subject: [PATCH] Basic implementation of rectangle

---
 src/js/whiteboard.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/js/whiteboard.js b/src/js/whiteboard.js
index 3d1f111..0ab9fd8 100644
--- a/src/js/whiteboard.js
+++ b/src/js/whiteboard.js
@@ -773,12 +773,14 @@ const whiteboard = {
         _this.ctx.closePath();
         _this.ctx.globalCompositeOperation = _this.oldGCO;
     },
-    drawRec: function (fromX, fromY, toX, toY, color, thickness) {
+    drawRec: function (fromX, fromY, toX, toY, color, thickness, remote) {
         var _this = this;
         toX = toX - fromX;
         toY = toY - fromY;
+        let xOffset = remote ? _this.viewCoords.x : 0;
+        let yOffset = remote ? _this.viewCoords.y : 0;
         _this.ctx.beginPath();
-        _this.ctx.rect(fromX, fromY, toX, toY);
+        _this.ctx.rect(fromX + xOffset, fromY + yOffset, toX + xOffset, toY + yOffset);
         _this.ctx.strokeStyle = color;
         _this.ctx.lineWidth = thickness;
         _this.ctx.lineCap = _this.lineCap;
@@ -1255,7 +1257,7 @@ const whiteboard = {
                     _this.drawPenSmoothLine(data, color, thickness, true);
                 }
             } else if (tool === "rect") {
-                _this.drawRec(data[0], data[1], data[2], data[3], color, thickness);
+                _this.drawRec(data[0], data[1], data[2], data[3], color, thickness, true);
             } else if (tool === "circle") {
                 _this.drawCircle(data[0], data[1], data[2], color, thickness);
             } else if (tool === "eraser") {