> ## 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.

# Shape elements with asset

Create shape elements with image and video fills.

## Running this example

To run this example locally:

1. If you haven't already, create a new app in the [Developer Portal](https://www.canva.com/developers/apps). For more information, refer to our [Quickstart guide](https://www.canva.dev/docs/apps/quickstart/).

2. In your app's configuration on the [Developer Portal](https://www.canva.com/developers/apps), ensure the "Development URL" is set to `http://localhost:8080`.

3. Clone the starter kit:

   ```shell
   git clone https://github.com/canva-sdks/canva-apps-sdk-starter-kit.git
   cd canva-apps-sdk-starter-kit
   ```

4. Install dependencies:

   ```shell
   npm install
   ```

5. Run the example:
   ```shell
   npm run start:example shape_elements_with_asset
   ```

6. Click the **Preview URL** link shown in the terminal to open the example in the Canva editor.

## Example app source code

<Tabs>
  <Tab name="app.tsx">
    ```typescript
    // For usage information, see the README.md file.
    /* eslint-disable no-console */
    import { addElementAtPoint } from "@canva/design";
    import { upload } from "@canva/asset";
    import { Alert, Button, Rows, Text } from "@canva/app-ui-kit";
    import * as styles from "styles/components.css";
    import { useFeatureSupport } from "@canva/app-hooks";

    // SVG path data for a heart shape - defines the vector outline that will be filled with media
    const HEART_PATH =
      "M 20 10 C 20.97 5 22.911 0 29.702 0 C 36.494 0 41.83 5 39.405 15 C 36.979 25 25.821 30 20 40 C 14.179 30 3.021 25 0.595 15 C -1.8304 5 3.5059 0 10.298 0 C 17.089 0 19.03 5 20 10 Z";

    export const App = () => {
      const isSupported = useFeatureSupport();
      // Check if the addElementAtPoint API is supported in the current design type
      const isRequiredFeatureSupported = isSupported(addElementAtPoint);

      const addShapeWithImageFill = async () => {
        // Upload image asset using Canva's asset upload API - returns a reference immediately
        const image = await upload({
          type: "image",
          mimeType: "image/jpeg",
          url: "https://www.canva.dev/example-assets/image-import/image.jpg",
          thumbnailUrl:
            "https://www.canva.dev/example-assets/image-import/thumbnail.jpg",
          width: 540,
          height: 720,
          aiDisclosure: "none",
        });

        // Create a shape element with the uploaded image as fill using Canva's Design API
        await addElementAtPoint({
          type: "shape",
          paths: [
            {
              d: HEART_PATH,
              fill: {
                // dropTarget enables users to drag-drop assets onto this shape in the editor
                dropTarget: true,
                asset: {
                  type: "image",
                  ref: image.ref, // Reference to the uploaded asset
                },
              },
            },
          ],
          // viewBox defines the coordinate system and dimensions for the SVG shape
          viewBox: {
            width: 40,
            height: 40,
            top: 0,
            left: 0,
          },
        });

        // Wait for upload completion to handle any upload errors
        await image.whenUploaded();

        // Upload completed successfully
        console.log("Upload complete!");
      };

      const addShapeWithVideoFill = async () => {
        // Upload video asset using Canva's asset upload API - includes both image and video thumbnails
        const video = await upload({
          type: "video",
          mimeType: "video/mp4",
          url: "https://www.canva.dev/example-assets/video-import/video.mp4",
          thumbnailImageUrl:
            "https://www.canva.dev/example-assets/video-import/thumbnail-image.jpg",
          thumbnailVideoUrl:
            "https://www.canva.dev/example-assets/video-import/thumbnail-video.mp4",
          width: 405,
          height: 720,
          aiDisclosure: "none",
        });

        // Create a shape element with the uploaded video as fill using Canva's Design API
        await addElementAtPoint({
          type: "shape",
          paths: [
            {
              d: HEART_PATH,
              fill: {
                // dropTarget enables users to drag-drop assets onto this shape in the editor
                dropTarget: true,
                asset: {
                  type: "video",
                  ref: video.ref, // Reference to the uploaded video asset
                },
              },
            },
          ],
          // viewBox defines the coordinate system and dimensions for the SVG shape
          viewBox: {
            width: 40,
            height: 40,
            top: 0,
            left: 0,
          },
        });

        // Wait for upload completion to handle any upload errors
        await video.whenUploaded();

        // Upload completed successfully
        console.log("Upload complete!");
      };

      return (
        <div className={styles.scrollContainer}>
          <Rows spacing="3u">
            <Text>
              This example demonstrates how apps can add shape elements with image
              and video fill.
            </Text>
            <Rows spacing="1.5u">
              <Button
                onClick={addShapeWithImageFill}
                variant="secondary"
                // Shape elements are not supported in certain design types such as docs
                disabled={!isRequiredFeatureSupported}
                stretch
              >
                Add shape element with image fill
              </Button>
              <Button
                onClick={addShapeWithVideoFill}
                variant="secondary"
                // Shape elements are not supported in certain design types such as docs
                disabled={!isRequiredFeatureSupported}
                stretch
              >
                Add shape element with video fill
              </Button>
            </Rows>
            {!isRequiredFeatureSupported && <UnsupportedAlert />}
          </Rows>
        </div>
      );
    };

    const UnsupportedAlert = () => (
      <Alert tone="warn">
        Sorry, the required features are not supported in the current design.
      </Alert>
    );
    ```
  </Tab>

  <Tab name="index.tsx">
    ```typescript
    // For usage information, see the README.md file.
    import { AppUiProvider } from "@canva/app-ui-kit";
    import { createRoot } from "react-dom/client";
    import { App } from "./app";
    import "@canva/app-ui-kit/styles.css";
    import type { DesignEditorIntent } from "@canva/intents/design";
    import { prepareDesignEditor } from "@canva/intents/design";

    async function render() {
      const root = createRoot(document.getElementById("root") as Element);

      root.render(
        <AppUiProvider>
          <App />
        </AppUiProvider>,
      );
    }

    const designEditor: DesignEditorIntent = { render };
    prepareDesignEditor(designEditor);

    // Hot Module Replacement for development (automatically reloads the app when changes are made)
    if (module.hot) {
      module.hot.accept("./app", render);
    }
    ```
  </Tab>

  <Tab name="README.md">
    ```markdown
    # Shape elements with asset fill

    Demonstrates how to create custom shape elements filled with image assets. Shows combining vector paths with image fills to create unique design elements with both shape and image properties.

    For API reference docs and instructions on running this example, see: https://www.canva.dev/docs/apps/examples/shape-elements-with-asset/.

    Related examples: See design_elements/shape_elements for solid color shapes, or design_elements/image_elements for standalone image insertion.

    NOTE: This example differs from what is expected for public apps to pass a Canva review:

    - Static assets are used for demonstration purposes only. Production apps should host assets on a CDN/hosting service and use the `upload` function from the `@canva/asset` package
    - Asset format validation is not implemented. Production apps should validate asset formats and handle unsupported formats gracefully
    - Error handling is simplified for demonstration. Production apps must implement comprehensive error handling with clear user feedback and graceful failure modes
    - Internationalization is not implemented. Production apps must support multiple languages using the `@canva/app-i18n-kit` package to pass Canva review requirements
    - The code structure is simplified: Production apps using [intents](https://www.canva.dev/docs/apps/intents/) are recommended to call the prepareDesignEditor function from src/intents/design_editor/index.tsx
    - The `no-console` ESLint rule is disabled for console.log statements used for debugging purposes to demonstrate upload completion events
    ```
  </Tab>
</Tabs>

## API reference

* [App UI Kit](https://www.canva.dev/docs/apps/app-ui-kit/)
* [`addElementAtPoint`](https://www.canva.dev/docs/apps/api/latest/design-add-element-at-point/)
* [`prepareDesignEditor`](https://www.canva.dev/docs/apps/api/latest/intents-design-prepare-design-editor/)
* [`upload`](https://www.canva.dev/docs/apps/api/latest/asset-upload/)

## Need help?

* Join our [Community Forum](https://community.canva.dev/)
* Report issues with this example on [GitHub](https://github.com/canva-sdks/canva-apps-sdk-starter-kit/issues)