Merge pull request #62 from cracker0dks/dependabot/npm_and_yarn/websocket-extensions-0.1.4

chore(deps): bump websocket-extensions from 0.1.3 to 0.1.4

package-lock.json

@@ -13654,9 +13654,9 @@
       }
     },
     "websocket-extensions": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.3.tgz",
-      "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==",
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
       "dev": true
     },
     "whatwg-encoding": {

src/js/whiteboard.js

@@ -348,13 +348,13 @@ const whiteboard = {
                 const top = _this.startCoords.y < currentPos.y ? _this.startCoords.y : currentPos.y;
                 _this.mouseOverlay.css({ cursor: "default" });
                 const imgDiv = $(
-                    ```<div class="dragMe" style="position:absolute; left: ${left}px; top: ${top}px; width: ${width}px; border: 2px dotted gray; overflow: hidden; height: ${height}px;" cursor:move;">
-                    <canvas style="cursor:move; position:absolute; top:0px; left:0px;" width="${width}" height="${height}"/>
+                    `<div class="dragMe" style="position:absolute; left: ${left}px; top: ${top}px; width: ${width}px; border: 2px dotted gray; overflow: hidden; height: ${height}px;" cursor:move;">
+                    <canvas style="cursor:move; position:absolute; top:0px; left:0px;" width="${width}" height="${height}"></canvas>
                     <div style="position:absolute; right:5px; top:3px;">
                     <button draw="1" style="margin: 0px 0px; background: #03a9f4; padding: 5px; margin-top: 3px; color: white;" class="addToCanvasBtn btn btn-default">Drop</button>
                     <button style="margin: 0px 0px; background: #03a9f4; padding: 5px; margin-top: 3px; color: white;" class="xCanvasBtn btn btn-default">x</button>
                     </div>
-                    </div>```
+                    </div>`
                 );
                 const dragCanvas = $(imgDiv).find("canvas");
                 const dragOutOverlay = $(
@@ -987,12 +987,15 @@ const whiteboard = {
         var img = document.createElement("img");
         img.onload = function () {
             rotationAngle = rotationAngle ? rotationAngle : 0;
-            _this.ctx.save();
-            _this.ctx.translate(left + width / 2, top + height / 2);
-            _this.ctx.rotate(rotationAngle);
-            _this.ctx.drawImage(img, -(width / 2), -(height / 2), width, height);
-            _this.ctx.restore();
-            //_this.ctx.drawImage(img, left, top, width, height);
+            if (rotationAngle === 0) {
+                _this.ctx.drawImage(img, left, top, width, height);
+            } else {
+                _this.ctx.save();
+                _this.ctx.translate(left + width / 2, top + height / 2);
+                _this.ctx.rotate(rotationAngle);
+                _this.ctx.drawImage(img, -(width / 2), -(height / 2), width, height);
+                _this.ctx.restore();
+            }
             if (doneCallback) {
                 doneCallback();
             }
@@ -1263,9 +1266,11 @@ const whiteboard = {
             }
 
             if (drawBackgroundGrid) {
+                destCtx.globalAlpha = 0.8;
                 var ptrn = destCtx.createPattern(brackGroundImg, "repeat"); // Create a pattern with this image, and set it to "repeat".
                 destCtx.fillStyle = ptrn;
                 destCtx.fillRect(0, 0, copyCanvas.width, copyCanvas.height); // context.fillRect(x, y, width, height);
+                destCtx.globalAlpha = 1;
             }
 
             $.each(_this.imgContainer.find("img"), function () {