Polygon Annotation in JavaScript (ES6) PDF Viewer

21 Oct 202619 minutes to read

Polygon is a shape annotation used to outline irregular regions, highlight areas, or create custom callouts.

Polygon annotations overview

Add Polygon Annotation

Add polygon annotation via UI

Use the annotation toolbar to:

  • Click the Edit Annotation button in the PDF Viewer toolbar.
  • Open the Shape Annotation dropdown.
  • Choose Polygon, then draw on the page.

When in pan mode, selecting shape annotations switches the viewer to text select mode.

Shape toolbar

Enable polygon mode

The PDF Viewer library allows drawing polygon annotations programmatically after enabling polygon mode via button clicks.

<button id="polygonMode">Polygon</button>
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);

let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');

document.getElementById('polygonMode')?.addEventListener('click', () => {
    pdfviewer.annotationModule.setAnnotationMode('Polygon');
});
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);

let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
pdfviewer.appendTo('#PdfViewer');

document.getElementById('polygonMode')?.addEventListener('click', () => {
    pdfviewer.annotationModule.setAnnotationMode('Polygon');
});

Exit polygon mode

<button id="setNone">Normal Mode</button>
document.getElementById('setNone')?.addEventListener('click', () => {
    pdfviewer.annotationModule.setAnnotationMode('None');
});

Add a polygon annotation programmatically

The PDF Viewer library allows adding polygon annotations programmatically using the addAnnotation() method.

<button id="addPolygonAnnotation">Add Polygon annotation programmatically</button>
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, PolygonSettings } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);

let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');

document.getElementById('addPolygonAnnotation')?.addEventListener('click', () => {
    pdfviewer.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 }
        ]
    } as PolygonSettings);
});
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, PolygonSettings } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);

let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
pdfviewer.appendTo('#PdfViewer');

document.getElementById('addPolygonAnnotation')?.addEventListener('click', () => {
    pdfviewer.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 }
        ]
    } as PolygonSettings);
});

Edit Polygon Annotation

Edit Polygon Annotation in UI

Use the viewer to select, move, and resize Polygon annotations:

  • Select a Polygon to show its vertex handles.
  • Move: drag inside the shape to reposition it on the page.
  • Resize/reshape: drag any vertex handle to adjust the polygon points and size.
  • Delete or access more options from the context menu.

Use the toolbar to change appearance:

  • Use the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools.

See the sections below for details.

Edit the properties of polygon annotations

The fill color, stroke color, thickness, and opacity can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.

Edit fill color

The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.

CalibrateFillColor

Edit stroke color

The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.

CalibrateStrokeColor

Edit thickness

Edit border thickness using the range slider provided in the Edit Thickness tool.

CalibrateThickness

Edit opacity

The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.

CalibrateOpacity

Edit an existing polygon annotation programmatically

Use editAnnotation on items from annotationCollection.

<button id="editPolygonAnnotation">Edit Polygon annotation programmatically</button>
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);

let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');

document.getElementById('editPolygonAnnotation')?.addEventListener('click', () => {
    for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
        if (pdfviewer.annotationCollection[i].subject === 'Polygon') {
            pdfviewer.annotationCollection[i].strokeColor = '#0000FF';
            pdfviewer.annotationCollection[i].thickness = 2;
            pdfviewer.annotationCollection[i].fillColor = '#FFFF00';
            pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = 'Circle';
            pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
        }
    }
});
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);

let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
pdfviewer.appendTo('#PdfViewer');

document.getElementById('editPolygonAnnotation')?.addEventListener('click', () => {
    for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
        if (pdfviewer.annotationCollection[i].subject === 'Polygon') {
            pdfviewer.annotationCollection[i].strokeColor = '#0000FF';
            pdfviewer.annotationCollection[i].thickness = 2;
            pdfviewer.annotationCollection[i].fillColor = '#FFFF00';
            pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = 'Circle';
            pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
        }
    }
});

Default polygon settings during initialization

Set default properties before creating the control using polygonSettings.

import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);

let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.polygonSettings = { fillColor: 'pink', opacity: 0.6, strokeColor: 'yellow' };
pdfviewer.appendTo('#PdfViewer');
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);

let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
pdfviewer.polygonSettings = { fillColor: 'pink', opacity: 0.6, strokeColor: 'yellow' };
pdfviewer.appendTo('#PdfViewer');

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'
}
var pdfviewer = new ej.pdfviewer.PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.polygonSettings = {
    fillColor: '#ffa5d8',
    strokeColor: '#ff6a00',
    thickness: 2,
    opacity: 0.9,
    borderStyle: ej.pdfviewer.BorderStyle.Cloud,
    cloudIntensity: 2
  };
pdfviewer.appendTo("#PdfViewer");

Apply a Dashed Border

var pdfviewer = new ej.pdfviewer.PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.polygonSettings = {
    fillColor: '#ffa5d8',
    strokeColor: '#ff6a00',
    thickness: 2,
    opacity: 0.9,
    borderStyle: ej.pdfviewer.BorderStyle.Dashed,
    borderDashArray: [5, 5]
  };
pdfviewer.appendTo("#PdfViewer");

Set properties while adding Individual Annotation

Set properties for individual annotations before creating the control using PolygonSettings.

After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings.

Refer to the following code snippet to set the default Polygon settings.

<button id="Polygon">Add Polygon</button>
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PolygonSettings} from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);

const pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
pdfviewer.appendTo('#PdfViewer');
//Apply Polygon Settings while adding individual Annotation
document.getElementById('Polygon')?.addEventListener('click', function () {
    pdfviewer.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:'#FF0000',
        opacity: 0.9,
        strokeColor:'#FF0000'
    } as PolygonSettings);
});
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PolygonSettings} from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);

const pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
pdfviewer.appendTo('#PdfViewer');
//Apply Polygon Settings while adding individual Annotation
document.getElementById('Polygon')?.addEventListener('click', function () {
    pdfviewer.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:'#FF0000',
        opacity: 0.9,
        strokeColor:'#FF0000'
    } as PolygonSettings);
});

View Sample on GitHub

See also