# Rendering Differences

Pixel draws an image twice, with two different engines:

- **The editor canvas** is drawn by your browser, so you can edit it live.
- **The rendered image** is drawn on the server by ImageMagick, through the
  Imagick PHP extension. This is the file your pages, the PHP functions and the
  shortcode use.

The two engines lay out text and shapes in slightly different ways, so line
breaks, letter spacing, and the exact position of text can differ a little
between the canvas and the file. Text that would overflow its box is also
treated differently: the server
[shrinks it to fit](/docs/pixel/info/how-text-works.md#long-text-shrinks).

## Checking the final result

**Preview image** in the editor's toolbar renders the current design, saved or
not, on the server for the post chosen as preview data. What it shows is what
Pixel will produce, so use it:

- after changing fonts, sizes or spacing,
- with posts whose titles are short and long,
- before relying on pixel-exact alignment.

Building a design up in steps and previewing as you go makes a difference easy
to trace to the change that caused it.

## When an element is missing

The server skips an element it cannot draw, such as text in a font file it
cannot read, and still renders the rest of the image. Text in a font that is
not available renders in the Default font instead. If something shows in the
editor but not in the rendered image, see
[Troubleshooting](/docs/pixel/troubleshooting.md).