diff --git a/frontend/src/features/canvas/IAICanvas.tsx b/frontend/src/features/canvas/IAICanvas.tsx
index e3ec8a7efc..23ebd40925 100644
--- a/frontend/src/features/canvas/IAICanvas.tsx
+++ b/frontend/src/features/canvas/IAICanvas.tsx
@@ -1,7 +1,7 @@
 // lib
 import { MutableRefObject, useEffect, useRef, useState } from 'react';
 import Konva from 'konva';
-import { Group, Layer, Stage } from 'react-konva';
+import { Layer, Stage } from 'react-konva';
 import { Image as KonvaImage } from 'react-konva';
 import { Stage as StageType } from 'konva/lib/Stage';
 
@@ -233,31 +233,30 @@ const IAICanvas = () => {
             <IAICanvasOutpaintingObjects />
             <IAICanvasIntermediateImage />
           </Layer>
-          <Layer id={'mask-layer'} listening={false}>
-            <IAICanvasMaskLines visible={isMaskEnabled} listening={false} />
+          <Layer id={'mask-layer'} visible={isMaskEnabled} listening={false}>
+            <IAICanvasMaskLines visible={true} listening={false} />
 
-            <IAICanvasMaskCompositer
-              listening={false}
-              globalCompositeOperation="source-in"
-            />
+            <IAICanvasMaskCompositer listening={false} />
 
-            <Group globalCompositeOperation="destination-over">
-              {canvasBgImage && (
-                <>
-                  <KonvaImage
-                    image={canvasBgImage}
-                    listening={false}
-                    visible={!shouldInvertMask}
-                  />
-                  <KonvaImage
-                    image={canvasBgImage}
-                    listening={false}
-                    globalCompositeOperation="source-in"
-                    visible={shouldInvertMask}
-                  />
-                </>
-              )}
-            </Group>
+            {canvasBgImage && (
+              <>
+                <KonvaImage
+                  image={canvasBgImage}
+                  listening={false}
+                  globalCompositeOperation="source-in"
+                  visible={shouldInvertMask}
+                />
+
+                <KonvaImage
+                  image={canvasBgImage}
+                  listening={false}
+                  globalCompositeOperation="source-out"
+                  visible={
+                    !shouldInvertMask && shouldShowCheckboardTransparency
+                  }
+                />
+              </>
+            )}
           </Layer>
           <Layer id={'preview-layer'}>
             <IAICanvasBoundingBoxPreview visible={shouldShowBoundingBox} />
diff --git a/frontend/src/features/canvas/IAICanvasMaskCompositer.tsx b/frontend/src/features/canvas/IAICanvasMaskCompositer.tsx
index 506fbdc76e..c3e218eff4 100644
--- a/frontend/src/features/canvas/IAICanvasMaskCompositer.tsx
+++ b/frontend/src/features/canvas/IAICanvasMaskCompositer.tsx
@@ -39,7 +39,7 @@ const IAICanvasMaskCompositer = (props: IAICanvasMaskCompositerProps) => {
       height={stageDimensions.height / stageScale}
       width={stageDimensions.width / stageScale}
       fill={maskColorString}
-      globalCompositeOperation={'source-over'}
+      globalCompositeOperation={'source-in'}
       listening={false}
       {...rest}
     />