Overlays and Watermarks

In graphic design, controlling the behavior of elements is crucial for creating professional and efficient designs. Special properties like selectable: false, alwaysOnTop: true, and showInExport: false provide developers with the flexibility to manage overlays, watermarks, and guides seamlessly within their projects.

The most common uses cases are:

• Watermarks: Protect your designs while keeping them non-interactive.

• Overlays: Display information or graphics that stay visible without interfering with design interaction.

• User Tips: Provide guidance within the design that doesn't export with the final product.

• Cutting Edges: Keep guide marks visible only during the design process.

Here is how you can create such elements:

store.activePage.addElement({
  type: 'image',
  src: 'path-to-your-watermark-or-overlay.png',
  // this will make it non-selectable
  selectable: false,
  // this will make it always on top
  alwaysOnTop: true,
  // this will make it not visible in export
  showInExport: false,
});

Example

In the demo let's add a dashed red shape on top of the design and make it non-selectable, always on top, and not visible in export.Regular user can't do anything with it, but it is visible on the screen.You can use special "admin" role to allow users to interact with such elements. See Roles for more details.