> 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 dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
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 optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.