From 664348f5555d0e32107792f4c1f26958e9f2edd9 Mon Sep 17 00:00:00 2001
From: Karlen Manaseryan <kmanaseryan@gmail.com>
Date: Tue, 19 Oct 2021 22:28:24 +0400
Subject: [PATCH] Issue #266 - Revert back to prev border effect implementation

---
 src/js/modules/effects/borders.js | 59 +++++++++++--------------------
 1 file changed, 20 insertions(+), 39 deletions(-)

diff --git a/src/js/modules/effects/borders.js b/src/js/modules/effects/borders.js
index e2b4c8e8..47935cfa 100644
--- a/src/js/modules/effects/borders.js
+++ b/src/js/modules/effects/borders.js
@@ -71,10 +71,10 @@ class Effects_borders_class {
     render_post(ctx, data, layer) {
         const size = Math.max(0, data.params.size);
 
-        let x = layer.x;
-        let y = layer.y;
-        let width = parseInt(layer.width);
-        let height = parseInt(layer.height);
+        const x = layer.x;
+        const y = layer.y;
+        const width = parseInt(layer.width);
+        const height = parseInt(layer.height);
 
         //legacy check
         if (x == null) x = 0;
@@ -84,43 +84,24 @@ class Effects_borders_class {
 
         ctx.save();
 
-        const offsets = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1]; // offset array
-
-        // Create an isolated canvas to draw our bordered image
-        const newCanvas = document.createElement("canvas");
-        newCanvas.height = 2 * Math.max(ctx.canvas.height, layer.height);
-        newCanvas.width = 2 * Math.max(ctx.canvas.width, layer.width);
-
-        let newCtx = newCanvas.getContext("2d");
-        // Draw the same image, but scaled by the border size
-        for (let i = 0; i < offsets.length; i += 2) {
-            newCtx.drawImage(
-                layer.link,
-                x + offsets[i] * size,
-                y + offsets[i + 1] * size,
-                width,
-                height
-            );
-        }
-
-        // Set the color
-        newCtx.fillStyle = data.params.color;
-        // Now we will intersect the above drawn image with the rectangle below
-        // As a result we will have an object having the same shape of the original image, but scaled by the border size
-        newCtx.globalCompositeOperation = "source-in";
-        newCtx.fillRect(
-            x - size,
-            y - size,
-            width + 2 * size,
-            height + 2 * size
-        );
+        //set styles
+        ctx.strokeStyle = data.params.color;
+        ctx.lineWidth = size;
 
-        // Now draw our image from isolated canvas to the main one
-        ctx.drawImage(newCanvas, 0, 0);
+        //draw with rotation support
+        ctx.translate(layer.x + width / 2, layer.y + height / 2);
+        ctx.rotate((layer.rotate * Math.PI) / 180);
+        const x_new = -width / 2;
+        const y_new = -height / 2;
 
-        // Draw the original image in normal size on top of the newly created object
-        ctx.globalCompositeOperation = "source-over";
-        ctx.drawImage(layer.link, x, y, width, height);
+        ctx.beginPath();
+        ctx.rect(
+            x_new - size * 0.5,
+            y_new - size * 0.5,
+            width + size,
+            height + size
+        );
+        ctx.stroke();
 
         ctx.restore();
     }