Area Annotation in ASP.NET Core PDF Viewer

14 Aug 20268 minutes to read

Area is a measurement annotation used to calculate the surface of a closed region on a PDF page—ideal for engineering, construction, or design reviews.

Area overview

Enable Area Measurement

To enable Area annotations, inject the following modules into the ASP.NET Core PDF Viewer:

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
             style="height:600px"
             documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
             resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib">
    </ejs-pdfviewer>
</div>

Add Area Annotation

Add Area Using the Toolbar

  1. Open the Annotation Toolbar.
  2. Select Measurement → Area.
  3. Click points to define the polygon; double‑click to close and finalize the area.

Measurement toolbar

Tip: If Pan mode is active, choosing a measurement tool switches the viewer into the appropriate interaction mode for a smoother workflow.

Enable Area Mode

Programmatically switch the viewer into Area mode.

<script>
function enableAreaMode() {
  var viewer = document.getElementById('pdfviewer').ej2_instances[0];
  viewer.annotation.setAnnotationMode('Area');
}
</script>

Exit Area Mode

<script>
function exitAreaMode() {
  var viewer = document.getElementById('pdfviewer').ej2_instances[0];
  viewer.annotation.setAnnotationMode('None');
}
</script>

Add Area Programmatically

Use the addAnnotation API to draw an area by providing vertexPoints for a closed region.

<script>
function addArea() {
  var viewer = document.getElementById('pdfviewer').ej2_instances[0];
  viewer.annotation.addAnnotation('Area', {
    offset: { x: 200, y: 500 },
    pageNumber: 1,
    vertexPoints: [
      { x: 200, y: 500 },
      { x: 288, y: 499 },
      { x: 289, y: 553 },
      { x: 200, y: 500 }
    ]
  });
}
</script>

Customize Area Appearance

Configure default properties using the Area Settings property (for example, default fill color, stroke color, opacity).

<div style="width:100%;height:650px">
    <ejs-pdfviewer id="pdfviewer"
             style="height:650px"
             documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
             resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib">
    </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
        var viewer = document.getElementById('pdfviewer').ej2_instances[0];
        viewer.areaSettings = { fillColor: 'yellow', strokeColor: 'orange', opacity: 0.6 };
    };
</script>

Manage Area (Move, Reshape, Edit, Delete)

  • Move: Drag inside the polygon to reposition it.
  • Reshape: Drag any vertex handle to adjust points and shape.

Edit Area Appearance

Edit Area Appearance (UI)

  • Edit the fill color using the Edit Color tool.
    Fill color
  • Edit the stroke color using the Edit Stroke Color tool.
    Stroke color
  • Edit the border thickness using the Edit Thickness tool.
    Thickness
  • Edit the opacity using the Edit Opacity tool.
    Opacity
  • Open Right Click → Properties for additional line‑based options.
    Line properties

Edit Area Programmatically

Update properties and call editAnnotation().

<script>
function editAreaProgrammatically() {
  var viewer = document.getElementById('pdfviewer').ej2_instances[0];
  for (var i = 0; i < viewer.annotationCollection.length; i++) {
    var ann = viewer.annotationCollection[i];
    if (ann.subject === 'Area calculation') {
      ann.strokeColor = '#0000FF';
      ann.thickness = 2;
      ann.fillColor = '#FFFF00';
      viewer.annotation.editAnnotation(ann);
      break;
    }
  }
}
</script>

Delete Area Annotation

Delete Area Annotation via UI (toolbar/context menu) or programmatically. For supported workflows and APIs, see Delete Annotation.

Set Default Properties During Initialization

Apply defaults for Area using the areaSettings property.

<div style="width:100%;height:650px">
    <ejs-pdfviewer id="pdfviewer"
             style="height:650px"
             documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
             resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib">
    </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
        var viewer = document.getElementById('pdfviewer').ej2_instances[0];
        viewer.areaSettings = { fillColor: 'yellow', strokeColor: 'orange', opacity: 0.6 };
};
</script>

Set Properties While Adding Individual Annotation

Pass per‑annotation values directly when calling addAnnotation.

<script>
function addStyledArea() {
  var viewer = document.getElementById('pdfviewer').ej2_instances[0];
  viewer.annotation.addAnnotation('Area', {
    offset: { x: 210, y: 510 },
    pageNumber: 1,
    vertexPoints: [
      { x: 210, y: 510 },
      { x: 300, y: 510 },
      { x: 305, y: 560 },
      { x: 210, y: 510 }
    ],
    strokeColor: '#EA580C',
    fillColor: '#FEF3C7',
    thickness: 2,
    opacity: 0.85
  });
}
</script>

Scale Ratio and Units

  • Use Scale Ratio from the context menu to set the actual‑to‑page scale.
    Scale ratio
  • Supported units include Inch, Millimeter, Centimeter, Point, Pica, Feet.
    Scale dialog

Set Default Scale Ratio During Initialization

Configure scale defaults using measurementSettings.

<div style="width:100%;height:650px">
    <ejs-pdfviewer id="pdfviewer"
             style="height:650px"
             documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
             resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib">
    </ejs-pdfviewer>
</div>
 <script>
    window.onload = function () {
      var viewer = document.getElementById('pdfviewer').ej2_instances[0];
      viewer.measurementSettings = { scaleRatio: 2, conversionUnit: 'm', displayUnit: 'm' };
    };

 </script>

Handle Area Events

Listen to annotation life-cycle events (add/modify/select/remove). For the full list and parameters, see Annotation Events.

Export and Import

Area measurements can be exported or imported with other annotations. For workflows and supported formats, see Export and Import annotations.

See Also