> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/get-started/samples/webviewer-react-canvastopdf.md).
# Vector-Quality Custom Annotations
Sample to integrate Apryse WebViewer in React and create vector-quality custom annotations
Sample that demonstrates how to create vector-quality custom annotations leveraging Apryse's `@pdftron/canvas-to-pdf` library using React.
Just follow these steps:
1. Define a custom annotation.
2. Define a draw handler containing canvas drawing commands.
3. Call `canvasToPDF` function that will accept the draw handler. This will output a blob representing a PDF with vector graphics.
4. Convert the output blob into a PDF Document object.
5. Pass the pdf document object to the custom annotation using `addCustomAppearance` function to create a vector appearance.
WebViewer provides a slick out-of-the-box responsive UI that enables you to view, annotate and manipulate PDFs and other document types inside any web project.
Click the button below to view the full project in GitHub.
{% tabs %}
{% tab title="JavaScript" %}
{% code title="App.js" lineNumbers="true" %}
```js
import { useRef, useEffect } from 'react';
import WebViewer from '@pdftron/webviewer';
import './App.css';
import canvasToPDF from '@pdftron/canvas-to-pdf';
import { drawTiger } from './drawTiger';
const App = () => {
const viewer = useRef(null);
useEffect(() => {
WebViewer(
{
path: "/webviewer/lib",
initialDoc: "/files/PDFTron_about.pdf",
},
viewer.current
).then(async (instance) => {
const { documentViewer, annotationManager, Annotations } = instance.Core;
const annotWidth = 600;
const annotHeight = 600;
documentViewer.addEventListener("documentLoaded", async () => {
const rectangleAnnot = new Annotations.RectangleAnnotation({
PageNumber: 1,
// values are in page coordinates with (0, 0) in the top left
X: 0,
Y: 0,
Width: annotWidth,
Height: annotHeight,
Author: annotationManager.getCurrentUser(),
});
const drawRect = (ctx) => {
const lineWidth = 20;
ctx.fillStyle = "red";
ctx.lineWidth = lineWidth;
ctx.strokeStyle = "black";
ctx.rect(
lineWidth / 2,
lineWidth / 2,
annotWidth - lineWidth,
annotHeight - lineWidth
);
ctx.fill();
ctx.stroke();
};
const drawGradientCircles = (ctx) => {
for (let i = 0; i < 15; i++) {
for (let j = 0; j < 15; j++) {
ctx.strokeStyle = `rgb(
0,
${Math.floor(255 - 42.5 * i)},
${Math.floor(255 - 42.5 * j)})`;
ctx.beginPath();
ctx.arc(25 + j * 40, 25 + i * 40, 15, 0, Math.PI * 2, true);
ctx.stroke();
}
}
};
const drawHatch = (ctx) => {
let X = 0;
let Y = 0;
ctx.save();
ctx.beginPath();
ctx.arc(
annotWidth * 0.5,
annotHeight * 0.5,
Math.max(annotHeight * 0.5, 0),
0,
Math.PI * 2,
false
);
ctx.closePath();
ctx.restore();
ctx.clip();
ctx.stroke();
const hatchSize = 10;
const hatchLineWidth = 1;
ctx.lineWidth = hatchLineWidth;
// horizontal lines
for (let i = Y; i < Y + annotHeight; i += hatchSize) {
ctx.beginPath();
ctx.moveTo(X, i);
ctx.lineTo(X + annotWidth, i);
ctx.stroke();
}
for (let i = X; i < X + annotWidth; i += hatchSize) {
ctx.beginPath();
ctx.moveTo(i, Y);
ctx.lineTo(i, Y + annotHeight);
ctx.stroke();
}
};
function rnd(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
const drawTriangles = (ctx) => {
const canvasWidth = annotWidth;
const canvasHeight = annotHeight;
var heightScale = 0.866;
ctx.fillStyle = "rgb(0,0,0)";
ctx.fillRect(0, 0, annotWidth, annotHeight);
ctx.lineWidth = 1;
var hueStart = rnd(0, 360);
var triSide = 40;
var halfSide = triSide / 2;
var rowHeight = Math.floor(triSide * heightScale);
var columns = Math.ceil(canvasWidth / triSide) + 1;
var rows = Math.ceil(canvasHeight / rowHeight);
var col, row;
for (row = 0; row < rows; row++) {
var hue = hueStart + row * 3;
for (col = 0; col < columns; col++) {
var x = col * triSide;
var y = row * rowHeight;
var clr;
if (row % 2 !== 0) {
x -= halfSide;
}
// upward pointing triangle
clr = "hsl(" + hue + ", 50%, " + rnd(0, 60) + "%)";
ctx.fillStyle = clr;
ctx.strokeStyle = clr;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + halfSide, y + rowHeight);
ctx.lineTo(x - halfSide, y + rowHeight);
ctx.closePath();
ctx.fill();
ctx.stroke(); // needed to fill antialiased gaps on edges
// downward pointing triangle
clr = "hsl(" + hue + ", 50%, " + rnd(0, 60) + "%)";
ctx.fillStyle = clr;
ctx.strokeStyle = clr;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + triSide, y);
ctx.lineTo(x + halfSide, y + rowHeight);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
}
};
const blob = await canvasToPDF(drawGradientCircles, {
width: rectangleAnnot.Width,
height: rectangleAnnot.Height,
});
const doc = await instance.Core.createDocument(blob, {
extension: "pdf",
});
rectangleAnnot.addCustomAppearance(doc, { pageNumber: 1 });
annotationManager.addAnnotation(rectangleAnnot);
// need to draw the annotation otherwise it won't show up until the page is refreshed
annotationManager.redrawAnnotation(rectangleAnnot);
});
});
}, []);
return (
);
};
export default App;
```
{% endcode %}
{% endtab %}
{% endtabs %}
[View the full sample on GitHub](https://github.com/ApryseSDK/webviewer-samples/tree/main/webviewer-react-canvasToPDF)
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://docs.apryse.com/web/get-started/samples/webviewer-react-canvastopdf.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.