{colors.map((color, i) => (
))}
);
};
```
The hook automatically handles URL resolution and SVG parsing. Use this in React components when you need reactive color detection.
## `polotno/utils/image` [#polotnoutilsimage]
Utilities for working with image dimensions and calculating crop values.
### `getImageSize(src)` [#getimagesizesrc]
Asynchronously detects the dimensions of an image from a URL or data URL.
```ts
import { getImageSize } from 'polotno/utils/image';
const { width, height } = await getImageSize('https://example.com/image.jpg');
console.log(`Image is ${width}x${height} pixels`);
```
Returns a Promise resolving to `{ width: number, height: number }`. Use this to get image dimensions before setting element properties.
### `getCrop(placeholder, imageSize)` [#getcropplaceholder-imagesize]
Calculates crop values to fit an image into a placeholder element using CSS "cover" behavior. The result fills the placeholder and may crop edges if aspect ratios differ.
```ts
import { getImageSize, getCrop } from 'polotno/utils/image';
// After getting uploaded file as dataURL
const { width, height } = await getImageSize(dataURL);
const crop = getCrop(placeholder, { width, height });
placeholder.set({
src: dataURL,
...crop,
// crop contains: cropX, cropY, cropWidth, cropHeight (normalized 0-1)
});
```
Crop values are normalized (0-1) and can be applied directly to image elements. For "contain" behavior, resize the element instead of using crop.
## `polotno/utils/math` [#polotnoutilsmath]
Geometric calculation utilities for bounding boxes, center points, and transformations.
### `getTotalClientRect(elements)` [#gettotalclientrectelements]
Calculates the axis-aligned bounding box of one or more elements, accounting for rotation.
```ts
import { getTotalClientRect } from 'polotno/utils/math';
const shapes = store.selectedElements;
const bbox = getTotalClientRect(shapes);
// Returns: { x: number, y: number, width: number, height: number }
```
Use this instead of simple `x + width/2` calculations when elements may be rotated. The bounding box accounts for rotation, giving accurate visual bounds.
### `getClientRect(element)` [#getclientrectelement]
Gets the bounding box of a single element, accounting for its rotation and transformations.
```ts
import { getClientRect } from 'polotno/utils/math';
const box = getClientRect(element);
// Returns: { x: number, y: number, width: number, height: number }
// Use for full-width backgrounds
backgroundEl.set({
x: 0,
y: box.y,
width: element.page.computedWidth,
height: box.height,
});
```
Returns the visual bounding box after applying rotation. Use this when you need precise element bounds for layout calculations.
### `getCenter(rect)` [#getcenterrect]
Calculates the center point of a rectangle.
```ts
import { getTotalClientRect, getCenter } from 'polotno/utils/math';
const bbox = getTotalClientRect(shapes);
const center = getCenter(bbox);
// Returns: { x: number, y: number }
```
Use this to find rotation centers for groups or multiple selections. Works with any object containing `x`, `y`, `width`, and `height` properties.
### `rotateAroundPoint(shape, angleDelta, center)` [#rotatearoundpointshape-angledelta-center]
Rotates a shape around a specified center point by a given angle delta.
```ts
import { getTotalClientRect, getCenter, rotateAroundPoint } from 'polotno/utils/math';
const bbox = getTotalClientRect(shapes);
const center = getCenter(bbox);
const delta = 45 - (element.rotation || 0);
const newShape = rotateAroundPoint(
{
x: element.x,
y: element.y,
width: element.width,
height: element.height,
rotation: element.rotation || 0,
},
delta,
center
);
element.set(newShape);
```
Returns a new shape object with updated `x`, `y`, and `rotation` values. Use this for programmatic rotation of elements around arbitrary points, such as the center of a selection.
## JSON to SVG [#json-to-svg]
Use `jsonToSVG` from [`@polotno/svg-export`](/docs/svg-export) to turn a design into an SVG string without mounting the editor.
## `polotno/utils/to-canvas` [#polotnoutilsto-canvas]
Render individual elements to canvas elements for custom export or processing.
### `unstable_elementToCanvas(elementId, options?)` [#unstable_elementtocanvaselementid-options]
Renders a single element to an HTML canvas element. Returns a Promise resolving to a canvas.
```ts
import { unstable_elementToCanvas } from 'polotno/utils/to-canvas';
const canvas = await unstable_elementToCanvas(store.selectedElements[0].id);
const dataURL = canvas.toDataURL();
```
**Options:**
| Option | Type | Default | Description |
| ------------ | ------ | ------- | ----------------------------------------------------------------- |
| `pixelRatio` | number | 1 | Output resolution multiplier. Use `2` for retina-quality exports. |
Use `pixelRatio` to control the output resolution. This is useful when the workspace is small on screen but you need a higher-resolution preview:
```ts
// Higher-resolution render at 2x
const canvas = await unstable_elementToCanvas(store.selectedElements[0].id, {
pixelRatio: 2,
});
```
{preview ? 
: null}
);
};
```
Pass the page object from `store.pages` and a ref attached to the element that should be observed for visibility. The hook returns `null` until the first render completes, then a `data:` URL of the page thumbnail.
Use this when the default `{t('sidePanel.yourLabel')}
;
};
```
Use this in custom components to access Polotno's translation system. See [Editor Configuration](/docs/editor-configuration) for details on setting up translations.
---
# Add Signature to the Canvas
URL: https://polotno.com/docs/add-signature-to-the-canvas
**Polotno** ships a built-in [drawing tool](/docs/drawing) (the Draw side-panel section, or `store.setTool('draw')`) for freehand strokes on the canvas; each stroke is added to the page as an `svg` element. When you need your own drawing UI instead — a signature pad, for instance — capture the drawing yourself and add the result to the canvas using `image` or `svg` elements.
In this demo, we create a custom side panel to add a signature to the document.
## Live demo [#live-demo]
{isQR &&
);
}),
};
```
## Step 2. Add the created section into the Polotno side panel [#step-2-add-the-created-section-into-the-polotno-side-panel]
```tsx
import { SidePanel, DEFAULT_SECTIONS } from 'polotno/side-panel';
import { QrSection } from './qr-section'; // this file is created on step 1
// add a new custom section
const sections = [QrSection, ...DEFAULT_SECTIONS];
// then in render of side panel:
Update select QR code:
} {!isQR &&Create new QR code:
} { setVal(e.target.value); }} placeholder="Type qr code content" value={val} style={{ width: '100%' }} />
Before exporting, click the **...** button to open additional export options.
### Export Options [#export-options]
- ` markup, so the marker and hanging indent are part of the element rather than faked with spaces.
* **Images** – including masked and stencil images, and text painted through a glyph clip (image- or gradient-filled headings), which comes back as editable text.
* **Transparency groups** – a PDF group whose opacity or blend mode affects the result comes back as an editable `group`, and PDF blend modes carry over as each element's `blendMode`.
* **Text shadows** – a shadow baked into a bitmap, or painted as a semi-transparent offset copy under each line, is folded into the text element's own shadow, so it follows the text when you edit the wording instead of leaving a ghost of the old one behind.
## Page size [#page-size]
Every page is sized from its own viewport, which accounts for that page's CropBox and rotation. A document that mixes page sizes or rotations imports with each page at its true size. A print PDF with a TrimBox imports at its trim size, with the bleed carried as the page's `bleed`.
## Installation [#installation]
```bash
npm install @polotno/pdf-import
```
## Basic Usage [#basic-usage]
```typescript
import { pdfToJson } from '@polotno/pdf-import';
const json = await pdfToJson({ pdf: buffer });
// Load into Polotno store
store.loadJSON(json);
```
## Options [#options]
```typescript
const json = await pdfToJson({
pdf: buffer,
scale: 96 / 72,
fontStrategy: 'auto',
password: 'secret',
onWarning: (warning) => console.warn(warning),
});
```
### `scale` [#scale]
Multiplier applied to all geometry in the returned design. The default `96 / 72` converts PDF points (1/72 inch) to CSS pixels (1/96 inch), so a design exported from a pixel-based tool comes back at its original size: a 1080×1350 Canva design imports as 1080×1350 rather than 810×1012.5. `dpi` scales along with it, so the physical print size is unchanged.
Pass `scale: 1` to keep raw PDF points.