diff --git a/invokeai/frontend/web/src/features/controlLayers/contexts/CanvasManagerProviderGate.tsx b/invokeai/frontend/web/src/features/controlLayers/contexts/CanvasManagerProviderGate.tsx
new file mode 100644
index 0000000000..c94af94b92
--- /dev/null
+++ b/invokeai/frontend/web/src/features/controlLayers/contexts/CanvasManagerProviderGate.tsx
@@ -0,0 +1,25 @@
+import { useStore } from '@nanostores/react';
+import { $canvasManager, type CanvasManager } from 'features/controlLayers/konva/CanvasManager';
+import type { PropsWithChildren } from 'react';
+import { createContext, memo, useContext } from 'react';
+import { assert } from 'tsafe';
+
+const CanvasManagerContext = createContext<CanvasManager | null>(null);
+
+export const useCanvasManager = (): CanvasManager => {
+  const canvasManager = useContext(CanvasManagerContext);
+  assert(canvasManager, 'useCanvasManagerContext must be used within a CanvasManagerContext');
+  return canvasManager;
+};
+
+export const CanvasManagerProviderGate = memo(({ children }: PropsWithChildren) => {
+  const canvasManager = useStore($canvasManager);
+
+  if (!canvasManager) {
+    return null;
+  }
+
+  return <CanvasManagerContext.Provider value={canvasManager}>{children}</CanvasManagerContext.Provider>;
+});
+
+CanvasManagerProviderGate.displayName = 'CanvasManagerProviderGate';