1 files changed, 21 insertions, 9 deletions
diff --git a/src/client/views/nodes/imageEditor/ImageEditor.tsx b/src/client/views/nodes/imageEditor/ImageEditor.tsx
index c8fe5adc3..5c7e09645 100644
--- a/src/client/views/nodes/imageEditor/ImageEditor.tsx
+++ b/src/client/views/nodes/imageEditor/ImageEditor.tsx
@@ -142,6 +142,7 @@ const ImageEditor = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addDoc
         ctx.clearRect(0, 0, canvasSize, canvasSize);
         undoStack.current = [];
         redoStack.current = [];
+        cutPts.current.length = 0;
         ImageUtility.drawImgToCanvas(currImg.current, canvasRef, canvasDims.width, canvasDims.height);
     };
 
@@ -366,20 +367,21 @@ const ImageEditor = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addDoc
         const canvasOriginalImg = ImageUtility.getCanvasImg(img);
         if (!canvasOriginalImg) return;
         // NOTE: cutting two diff shapes can be made possible by having the user press a button to set a new shape!
+        const currPts = [...cutPts.current];
         if (currCutType !== BrushMode.LINE_OUT) handleReset(); // gets rid of the visible brush strokes (mostly needed for line_in) unless it's erasing (which depends on the brush strokes)
         let minX = img.width;
         let maxX = 0;
         let minY = img.height;
         let maxY = 0;
-        if (cutPts.current.length) {
+        if (currPts.length) {
             ctx.beginPath();
-            ctx.moveTo(cutPts.current[0].x, cutPts.current[0].y);
-            for (let i = 0; i < cutPts.current.length; i++) {
-                ctx.lineTo(cutPts.current[i].x, cutPts.current[i].y);
-                minX = Math.min(cutPts.current[i].x, minX);
-                minY = Math.min(cutPts.current[i].y, minY);
-                maxX = Math.max(cutPts.current[i].x, maxX);
-                maxY = Math.max(cutPts.current[i].y, maxY);
+            ctx.moveTo(currPts[0].x, currPts[0].y);
+            for (let i = 0; i < currPts.length; i++) {
+                ctx.lineTo(currPts[i].x, currPts[i].y);
+                minX = Math.min(currPts[i].x, minX);
+                minY = Math.min(currPts[i].y, minY);
+                maxX = Math.max(currPts[i].x, maxX);
+                maxY = Math.max(currPts[i].y, maxY);
             }
             switch (currCutType) {
                 case BrushMode.IN:
@@ -453,7 +455,17 @@ const ImageEditor = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addDoc
         croppedCanvas.height = maxY - minY;
         croppedCtx.globalCompositeOperation = 'source-over';
         croppedCtx.clearRect(0, 0, croppedCanvas.width, croppedCanvas.height);
-        croppedCtx.drawImage(image, -minX, -minY);
+        croppedCtx.drawImage(
+            image,
+            minX,
+            minY,
+            maxX - minX,
+            maxY - minY, // Source image crop area
+            0,
+            0,
+            maxX - minX,
+            maxY - minY // Destination area on the canvas
+        );
         const croppedURL = croppedCanvas.toDataURL();
         const croppedImage = new Image();
         croppedImage.src = croppedURL;