# PageCanvas

Source: https://sdk.pdf.net/docs/v1/reference/PageCanvas



Renders a single page onto a canvas anywhere outside the main view: page thumbnails, previews, print layouts. See the [Building a PDF application](https://sdk.pdf.net/docs/v1/guides/building-a-pdf-application) guide for a thumbnail sidebar built with it.

| Prop                                       | Type      | Default   | What it does                                                                                                                                                             |
| ------------------------------------------ | --------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `pageId`                                   | `string`  | required  | The page to render, by an id obtained from [usePages](https://sdk.pdf.net/docs/v1/reference/usePages).                                                                                      |
| `scale`                                    | `number`  | automatic | Renders at the given scale. When omitted, the scale is derived from the canvas's displayed size.                                                                         |
| `renderOnResize`                           | `boolean` | `false`   | Re-renders when the window resizes. Use when the canvas size is relative to the window.                                                                                  |
| `isVisible`                                | `boolean` | automatic | Overrides the built-in visibility detection. Pass it when the parent already knows the visibility (a virtualized list), which saves an intersection observer per canvas. |
| `hideExtractableText`                      | `boolean` | `false`   | Skips drawing the text content, for rendering your own text layer on top.                                                                                                |
| `hideAnnotations`                          | `boolean` | `false`   | Skips drawing the annotations, form widgets included.                                                                                                                    |
| `className`, `style`, `role`, `aria-label` |           |           | Forwarded to the `canvas` element.                                                                                                                                       |

## Behavior [#behavior]

* Rendering is lazy: an off-screen canvas does no work until it becomes visible.
* The render resolution follows the canvas's displayed CSS size (or the explicit `scale`), so style the canvas to the size you need and the pixels stay sharp.
* The page rotation is applied and followed live.
* The canvas draws the page content as loaded from the PDF file. Edits made during the session are not yet reflected in `PageCanvas` output; the main view shows them.
* Render it only when the load state is `'ready'`: it throws `DocumentNotLoadedError` when no document is loaded.

## Example [#example]

```tsx
import { PageCanvas, usePages, useScrollToPage } from '@sdk-pdf/react'

function ThumbnailsSidebar() {
  const pages = usePages()
  const scrollToPage = useScrollToPage()

  return (
    <nav>
      {pages.map((page, index) => (
        <button key={page.id} onClick={() => scrollToPage(page.id)}>
          <PageCanvas
            pageId={page.id}
            className="thumbnail"
            aria-label={`Page ${index + 1}`}
          />
        </button>
      ))}
    </nav>
  )
}
```