> ## Documentation Index
> Fetch the complete documentation index at: https://www.canva.dev/docs/apps/llms.txt
> Use this file to discover all available pages before exploring further.

# overlay.registerOnCanOpen

API reference for the overlay.registerOnCanOpen method.

Registers a callback that runs when the `canOpen` state of an overlay target changes.

## Usage

### Register overlay handler

```typescript
import { overlay } from "@canva/design";

overlay.registerOnCanOpen({
  target: 'image_selection',
  onCanOpen: async (event) => {
    if (event.canOpen) {
      // Can open overlay for selected image
    }
  }
});
```

### Open image editing overlay

```typescript
import { overlay } from "@canva/design";

overlay.registerOnCanOpen({
  target: 'image_selection',
  onCanOpen: async (event) => {
    if (event.canOpen) {
      const processId = await event.open({
        launchParameters: {
          mode: 'edit'
        }
      });
      // Overlay process started, with `processId`
    }
  }
});
```

### Open overlay with filters

```typescript
import { overlay } from "@canva/design";

overlay.registerOnCanOpen({
  target: 'image_selection',
  onCanOpen: async (event) => {
    if (event.canOpen) {
      await event.open({
        launchParameters: {
          mode: 'edit',
          filters: ['brightness', 'contrast', 'saturation']
        }
      });
    }
  }
});
```

### Handle overlay unavailability

```typescript
import { overlay } from "@canva/design";

overlay.registerOnCanOpen({
  target: 'image_selection',
  onCanOpen: async (event) => {
    if (!event.canOpen) {
      // Cannot open overlay, handle specific reasons
      switch (event.reason) {
        case 'no_selection':
          // No image is selected
          break;
        case 'invalid_selection':
          // Selected content cannot be edited
          break;
      }
    }
  }
});
```

## Parameters

<Prop.List>
  <Prop name="opts" required type="object" sourceLineNumbers={[3374]}>
    Options for configuring the callback.

    <PillAccordion defaultExpanded={true} title={<>Properties of <strong>opts</strong></>}>
      <Prop.List>
        <Prop name="target" required type="Target" sourceLineNumbers={[3378]}>
          The target to check the `canOpen` state of.

          The only valid value is `"image_selection"`.
        </Prop>

        <Prop name="onCanOpen" required type="function" sourceLineNumbers={[3387]}>
          A callback that runs when the `canOpen` state of the specified target changes.

          This callback fires immediately.

          **Parameters**

          <Prop.List>
            <Prop name="event" required type="OverlayOpenableEvent<Target>" sourceLineNumbers={[3387]}>
              Information about whether or not an overlay can be opened for the specified target.

              <Tabs>
                <Tab name="OverlayUnopenableEvent">
                  Information about an overlay that can't be opened for the specified target.

                  <Prop.List>
                    <Prop name="canOpen" required type="boolean" sourceLineNumbers={[4852]}>
                      Indicates that the overlay can't be opened for the specified target.

                      The only valid value is `false`.
                    </Prop>

                    <Prop name="reason" required type="string" sourceLineNumbers={[4856]}>
                      Indicates the reason the overlay can't be opened for the specified target.
                    </Prop>
                  </Prop.List>
                </Tab>

                <Tab name="object">
                  <Prop.List>
                    <Prop name="canOpen" required type="boolean" sourceLineNumbers={[4821]}>
                      Indicates that the overlay can be opened for the selected image.

                      The only valid value is `true`.
                    </Prop>

                    <Prop name="open" required readonly type="function" sourceLineNumbers={[4826]}>
                      Opens an overlay for the selected image.

                      **Parameters**

                      <Prop.List>
                        <Prop name="options" required type="object" sourceLineNumbers={[4826]}>
                          <PillAccordion defaultExpanded={false} title={<>Properties of <strong>options</strong></>}>
                            <Prop.List>
                              <Prop name="launchParameters" type="unknown" sourceLineNumbers={[4833]}>
                                Parameters to pass to the overlay when it opens.

                                This can be any type of structured data.
                              </Prop>
                            </Prop.List>
                          </PillAccordion>
                        </Prop>
                      </Prop.List>

                      **Returns**

                      A unique identifier that references an app runtime process.

                      `Promise<AppProcessId>`
                    </Prop>
                  </Prop.List>
                </Tab>
              </Tabs>
            </Prop>
          </Prop.List>

          **Returns**

          `void`
        </Prop>
      </Prop.List>
    </PillAccordion>
  </Prop>
</Prop.List>

## Returns

() => `void`