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.

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.