Units and Measures

What metrics are using in Polotno?

By default Polotno is using CSS pixels as units with 1pt = 1px and 72dpi. Everything you see in the store is in pixels – width, height or fontSize; Polotno will use these values in UI.

You can change units displayed in UI using setUnits method.

store.setUnit({
  unit: 'mm', // mm, cm, in, pt, px
  dpi: 300,
});

How to display units in custom UI?

Also you can use special functions to convert units to pixels and back:

import { pxToUnitRounded, unitToPx, pxToUnit } from 'polotno/utils/unit';

// convert 100 pixels to mm with 300 DPI
var mm = pxToUnit({
  px: 100,
  unit: 'mm',
  dpi: 300,
});

// do the same, but with 2 digits rounding, so number doesn't look ugly long in UI
var mm = pxToUnitRounded({
  px: 100,
  unit: 'mm',
  precious: 2,
  dpi: 300,
});

// convert 30 mm to pixels with 300 DPI
var pixels = unitToPx({
  unit: 'mm',
  dpi: 300,
  unitVal: 30,
});

Exports and DPI

When you export your design to PDF, Polotno will use 72 DPI to determine the size of the exported pages. If you increase just the dpi, it will not change quality of the exported PDF. It will just produce a PDF file with smaller page sizes. You have two options to increase quality of your exported designs:

1. Use high pixelRatio attribute when you do the export. store.saveAsPDF({ pixelRatio: 2 })
2. Change DPI and change ALL pixels values in the store.

DPI Metadata in PNG and JPEG Exports

For PNG and JPEG exports, Polotno can embed DPI resolution metadata directly into the image file. This is useful for print workflows where downstream software needs to know the intended print resolution.

// Embed 300 DPI metadata
await store.saveAsImage({ dpi: 300 });

// Control when metadata is embedded
await store.toDataURL({ 
  dpi: 300, 
  dpiMetadata: 'auto' // 'auto' | 'always' | 'never'
});

Behavior:

• dpiMetadata: 'auto' (default) — Embeds DPI only when it differs from 72
• dpiMetadata: 'always' — Always embeds DPI metadata
• dpiMetadata: 'never' — Never embeds DPI metadata

The dpi parameter defaults to store.dpi if not specified. DPI metadata embedding only works with PNG and JPEG formats, not PDF or other formats.

Common Questions

How do I create print-ready designs?

Use store.setUnit({ unit: 'mm', dpi: 300 }) to work in print units. For export quality, increase pixelRatio in PDF export.

Why doesn't changing DPI improve export quality?

DPI only affects UI display and page dimensions, not render quality. Use pixelRatio in export functions to increase quality.

Can I mix units in a design?

The canvas editor internally uses pixels. Units are for display only. Use conversion functions to work with different units programmatically.