---
title: "Render page on canvas in JavaScript PDF viewer | Nutrient"
canonical_url: "https://www.nutrient.io/guides/web/viewer/rendering/render-in-canvas/"
md_url: "https://www.nutrient.io/guides/web/viewer/rendering/render-in-canvas.md"
last_updated: "2026-05-20T14:55:52.121Z"
description: "With Nutrient Web SDK, it’s possible to render a single PDF page as an image and insert it into a canvas element."
---
# Render pages on canvas in our JavaScript PDF viewer
With Nutrient Web SDK, it’s possible to render a single PDF page as an image and insert it into a `canvas` element. To do so, you can retrieve a single PDF page as an `ArrayBuffer`:
```js
async function appendCanvas() {
// Configuration for loading the PDF document.
const configuration = {
container: "#pspdfkit",
document: "document.pdf",
licenseKey: "YOUR_LICENSE_KEY" // Replace with your actual license key.
};
try {
const instance = await NutrientViewer.load(configuration);
const pageWidth = instance.pageInfoForIndex(0).width;
const pageHeight = instance.pageInfoForIndex(0).height;
const width = 400;
const height = Math.round((width * pageHeight) / pageWidth);
// Renders the first page (page index 0).
const buffer = await instance.renderPageAsArrayBuffer({ width: width }, 0);
const canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
const imageView = new Uint8Array(buffer);
const ctx = canvas.getContext("2d");
const imageData = ctx.createImageData(width, height);
imageData.data.set(imageView);
ctx.putImageData(imageData, 0, 0);
document.body.appendChild(canvas);
} catch (error) {
console.error("Failed to render page to canvas:", error.message);
throw error;
}
}
```
## Complete runnable example
Here’s a complete HTML example that you can use as a starting point:
```html
Render PDF Page to Canvas
```
## Rendering multiple pages
To render multiple pages to separate canvas elements:
```js
async function renderMultiplePages(documentPath, pageIndices, canvasWidth = 400) {
const configuration = {
container: "#pspdfkit",
document: documentPath,
licenseKey: "YOUR_LICENSE_KEY"
};
let instance = null;
const canvases = [];
try {
// Use PSPDFKit when loading from CDN, or `NutrientViewer` with the npm package.
instance = await PSPDFKit.load(configuration);
const totalPages = instance.totalPageCount;
for (const pageIndex of pageIndices) {
if (pageIndex < 0 || pageIndex >= totalPages) {
console.warn(`Skipping invalid page index: ${pageIndex}`);
continue;
}
const pageInfo = instance.pageInfoForIndex(pageIndex);
const canvasHeight = Math.round((canvasWidth * pageInfo.height) / pageInfo.width);
const buffer = await instance.renderPageAsArrayBuffer({ width: canvasWidth }, pageIndex);
const canvas = document.createElement("canvas");
canvas.width = canvasWidth;
canvas.height = canvasHeight;
const ctx = canvas.getContext("2d");
const imageData = ctx.createImageData(canvasWidth, canvasHeight);
imageData.data.set(new Uint8Array(buffer));
ctx.putImageData(imageData, 0, 0);
canvases.push(canvas);
}
return canvases;
} catch (error) {
console.error("Failed to render pages:", error);
throw error;
} finally {
if (instance) {
PSPDFKit.unload(instance);
}
}
}
// Example: Render pages 0, 2, and 4.
renderMultiplePages("document.pdf", [0, 2, 4]).then(canvases => {
const container = document.getElementById("canvas-container");
canvases.forEach(canvas => container.appendChild(canvas));
});
```
---
## Related pages
- [View and edit PDF forms online](/guides/web/viewer/rendering/pdf-forms.md)
- [Find and convert PDF coordinates with JavaScript](/guides/web/pspdfkit-for-web/coordinate-spaces.md)
- [Rendering PDF pages in our JavaScript PDF viewer](/guides/web/features/rendering-pdf-pages.md)
- [Render watermarks in our JavaScript PDF viewer](/guides/web/features/watermarks.md)