Issue viliusle#266 - Implement the border effect logic in an isolated…

… canvas

src/js/modules/effects/borders.js

@@ -86,9 +86,15 @@ class Effects_borders_class {
 
         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) {
-            ctx.drawImage(
+            newCtx.drawImage(
                 layer.link,
                 x + offsets[i] * size,
                 y + offsets[i + 1] * size,
@@ -98,11 +104,19 @@ class Effects_borders_class {
         }
 
         // Set the color
-        ctx.fillStyle = data.params.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
-        ctx.globalCompositeOperation = "source-in";
-        ctx.fillRect(x - size, y - size, width + 2 * size, height + 2 * size);
+        newCtx.globalCompositeOperation = "source-in";
+        newCtx.fillRect(
+            x - size,
+            y - size,
+            width + 2 * size,
+            height + 2 * size
+        );
+
+        // Now draw our image from isolated canvas to the main one
+        ctx.drawImage(newCanvas, 0, 0);
 
         // Draw the original image in normal size on top of the newly created object
         ctx.globalCompositeOperation = "source-over";