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 flexibility to manage overlays, watermarks, and guides seamlessly within your projects.

Common use cases:

• Watermarks: Protect 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',
  // make it non-selectable
  selectable: false,
  // keep it always on top
  alwaysOnTop: true,
  // hide it in export
  showInExport: false,
});

Make a watermark survive export

A watermark survives in whatever form the export keeps elements. Image exports and the raster PDF path (store.saveAsPDF(), store.toPDFDataURL(), or the Cloud Render API with the default vector: false) draw each page as one bitmap, so the watermark becomes part of the picture. The vector PDF path (@polotno/pdf-export, or the Cloud Render API with vector: true) keeps it as a separate object that any PDF editor can select and delete.

For a proof, a preview, or a free-tier download where the mark must stay, export raster. Use vector only when the recipient is entitled to the clean file. PDF export compares the two paths.

Example

In the demo we add a dashed red shape on top of the design and make it non-selectable, always on top, and not visible in export. A regular user can't change it, but it is visible on the screen.

To control these properties via UI, use User Roles admin mode or build custom locking controls.

Live demo