Polygon Annotation in React PDF Viewer

21 Oct 202611 minutes to read

Polygon annotations allow users to outline irregular regions, draw custom shapes, highlight non-rectangular areas, or create specialized callouts on PDFs for review and markup.

Polygon overview

Enable Polygon Annotation in the Viewer

To enable Polygon annotations, inject the following modules into the React PDF Viewer:

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { PdfViewerComponent, Inject, Toolbar, Annotation } from '@syncfusion/ej2-react-pdfviewer';

function App() {
  return (
    <PdfViewerComponent
      id="container"
      documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
      resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
      style={{ height: '650px' }}
    >
      <Inject services={[Toolbar, Annotation]} />
    </PdfViewerComponent>
  );
}

ReactDOM.createRoot(document.getElementById('sample')).render(<App />);

Add Polygon Annotation

Add Polygon Annotation Using the Toolbar

  1. Open the Annotation Toolbar.
  2. Select Shapes → Polygon.
  3. Click multiple points on the page to draw the polygon.
  4. Double-click to finalize the shape.

Shape toolbar

When in Pan mode, selecting a shape tool automatically switches the viewer to selection mode for smooth interaction.

Enable Polygon Mode

Switch the viewer into Polygon mode using setAnnotationMode('Polygon').

function enablePolygonMode() {
  const viewer = document.getElementById('container').ej2_instances[0];
  viewer.annotation.setAnnotationMode('Polygon');
}

Exit Polygon Mode

Switch back to normal mode using:

function exitPolygonMode() {
  const viewer = document.getElementById('container').ej2_instances[0];
  viewer.annotation.setAnnotationMode('None');
}

Add Polygon Programmatically

Use the addAnnotation API to draw a polygon by specifying multiple vertexPoints.

function addPolygon() {
  const viewer = document.getElementById('container').ej2_instances[0];
  viewer.annotation.addAnnotation('Polygon', {
    offset: { x: 200, y: 800 },
    pageNumber: 1,
    vertexPoints: [
      { x: 200, y: 800 }, { x: 242, y: 771 },
      { x: 289, y: 799 }, { x: 278, y: 842 },
      { x: 211, y: 842 }, { x: 200, y: 800 }
    ]
  });
}

Customize Polygon Appearance

Configure default polygon appearance (fill color, stroke color, thickness, opacity) using the polygonSettings property.

<PdfViewerComponent
  id="container"
  documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
  resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
  polygonSettings={{ fillColor: '#ffa5d8', strokeColor: '#ff6a00', thickness: 2, opacity: 0.9 }}
  style={{ height: '650px' }}
>
  <Inject services={[Toolbar, Annotation]} />
</PdfViewerComponent>

Supported Border Styles

In addition to the default Solid border, Polygon annotations support the following additional border styles:

  • Cloud — scalloped cloud border.
  • Dashed — dashed line border.

Use BorderStyle values such as BorderStyle.Cloud and BorderStyle.Dashed together with the optional borderDashArray and cloudIntensity settings in the polygonSettings property.

Property Type Description
borderStyle BorderStyle Specifies the border style. Supported values: BorderStyle.Solid, BorderStyle.Cloud, and BorderStyle.Dashed.
borderDashArray number[] Specifies the dash pattern when borderStyle is BorderStyle.Dashed.
cloudIntensity number Specifies the cloud border intensity. Supported range: 1 to 2; default value: 1.

borderStyle, borderDashArray, and cloudIntensity are preserved during save, reload, import, and export.

Apply a Cloud Border

export enum BorderStyle {
    Solid = 'Solid',
    Dashed = 'Dashed',
    Cloud = 'Cloud'
}
<PdfViewerComponent
  id="container"
  documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
  resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
  polygonSettings={{
    fillColor: '#ffa5d8',
    strokeColor: '#ff6a00',
    thickness: 2,
    opacity: 0.9,
    borderStyle: BorderStyle.Cloud,
    cloudIntensity: 2
  }}
  style={{ height: '650px' }}
>
  <Inject services={[Toolbar, Annotation]} />
</PdfViewerComponent>

Apply a Dashed Border

<PdfViewerComponent
  id="container"
  documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
  resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
  polygonSettings={{
    fillColor: '#ffa5d8',
    strokeColor: '#ff6a00',
    thickness: 2,
    opacity: 0.9,
    borderStyle: BorderStyle.Dashed,
    borderDashArray: [5, 5]
  }}
  style={{ height: '650px' }}
>
  <Inject services={[Toolbar, Annotation]} />
</PdfViewerComponent>

Manage Polygon (Edit, Move, Resize, Delete)

Edit Polygon

Edit Polygon (UI)

  • Select a Polygon to view resize handles.
  • Drag any side/corner to resize; drag inside the shape to move it.
  • Edit fill, stroke, thickness, and opacity using the annotation toolbar.

Shape tools

Use the annotation toolbar:

  • Edit fill Color tool
    Edit fill color

  • Edit stroke Color tool
    Edit stroke color

  • Edit Opacity slider
    Edit opacity

  • Edit Thickness slider
    Edit thickness

Edit Polygon Programmatically

Modify an existing Polygon programmatically using editAnnotation().

function editPolygonProgrammatically() {
  const viewer = document.getElementById('container').ej2_instances[0];

  for (const annot of viewer.annotationCollection) {
    if (annot.subject === 'Polygon') {
      annot.strokeColor = '#0000ff';
      annot.thickness = 2;
      annot.fillColor = '#ffff00';
      viewer.annotation.editAnnotation(annot);
      break;
    }
  }
}

Delete Polygon

The PDF Viewer supports deleting existing annotations through the UI and API.
See Delete Annotation for full behavior and workflows.

Comments

Use the Comments panel to add, view, and reply to threaded discussions linked to polygon annotations. It provides a dedicated interface for collaboration and review within the PDF Viewer.

Set properties while adding individual annotations

Configure per-annotation appearance while adding a polygon using addAnnotation.

function addMultiplePolygons() {
  const viewer = document.getElementById('container').ej2_instances[0];

  // Polygon 1
  viewer.annotation.addAnnotation('Polygon', {
    offset: { x: 200, y: 800 },
    pageNumber: 1,
    vertexPoints: [
      { x: 200, y: 800 }, { x: 242, y: 771 },
      { x: 289, y: 799 }, { x: 278, y: 842 },
      { x: 211, y: 842 }, { x: 200, y: 800 }
    ],
    fillColor: '#ffa5d8',
    strokeColor: '#ff6a00',
    thickness: 2,
    opacity: 0.9,
    author: 'User 1'
  });

  // Polygon 2
  viewer.annotation.addAnnotation('Polygon', {
    offset: { x: 360, y: 800 },
    pageNumber: 1,
    vertexPoints: [
      { x: 360, y: 800 }, { x: 410, y: 770 },
      { x: 450, y: 810 }, { x: 430, y: 850 },
      { x: 380, y: 850 }, { x: 360, y: 800 }
    ],
    fillColor: '#ffe600',
    strokeColor: '#ff1010',
    thickness: 3,
    opacity: 0.85,
    author: 'User 2'
  });
}

Disable Shape Annotation

Disable shape annotations (Polygon, Line, Rectangle, Circle, Arrow) using the enableShapeAnnotation property.

<PdfViewerComponent
  id="container"
  enableShapeAnnotation={false}
  documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
  resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
  style={{ height: '650px' }}
>
  <Inject services={[Toolbar, Annotation]} />
</PdfViewerComponent>

Handle Polygon Events

The PDF viewer provides annotation life-cycle events that notify when Polygon annotations are added, modified, selected, or removed.
For the full list of available events and their descriptions, see Annotation Events.

Export and Import

The PDF Viewer supports exporting and importing annotations. For details on supported formats and workflows, see Export and Import annotations.

See Also