This is an old documentation. Go to the latest Customer's Canvas docs

changeBackground Method


  • changeBackground(surfaces: Surface [], data: ImageMetaData | string ) : Promise < ShapeItem [] >
  • Sets an image or a plain color to the background.

    changeBackground = async () => {
        // Get the product loaded into the editor.
        let product = await editor.getProduct();
        // Get metadata of an image in the public gallery.
        const metaData = await editor.configuration.getImageMetadata("public:backgrounds/azure.jpg");
        // Apply the image to the background of the first surface.
        product.changeBackground([product.surfaces[0]], metaData);
        // Apply the color to the background of the second surface.
        product.changeBackground([product.surfaces[1]], "#30C2FF");


    • surfaces: Surface []

      An array of surfaces where the background should be changed.

    • data: ImageMetaData | string

      Either an object representing the image metadata or a string representing the color in CCS format (for example: "DeepSkyBlue", "rgb(48,194,255)", "#30C2FF").

    Returns Promise < ShapeItem [] >

    An array of shape items.