# Measure area in a PDF using JavaScript Measure area in a PDF using Nutrient Web SDK starting with version 2022.5. To measure area in your app, [contact the Sales team](https://www.nutrient.io/contact-sales) to add the Measurement Tools component to your license, or run the SDK in trial mode. Measure area in one of the following ways: - [Measure the area of a custom-drawn polygon](#measuring-the-area-of-a-polygon) - [Measure the area of an ellipse](#measuring-the-area-of-an-ellipse) - [Measure the area of a rectangle](#measuring-the-area-of-a-rectangle) ## Measuring the area of a polygon Measure the area of a custom-drawn polygon in one of the following ways: - [Using the built-in user interface (UI)](#measuring-the-area-of-a-polygon-using-the-built-in-ui) - [Programmatically](#measuring-the-area-of-a-polygon-programmatically) ### Measuring the area of a polygon using the built-in UI To measure the area of a polygon using the built-in UI, follow the steps below: 1. Click the measurement tools icon in the toolbar. 2. Tap **Polygon Area**. 3. Draw a polygon around the area you want to measure. ### Measuring the area of a polygon programmatically To measure the area of a polygon programmatically, use the [`PolygonAnnotation` shape constructor](https://www.nutrient.io/api/web/classes/NutrientViewer.Annotations.PolygonAnnotation.html), which takes a [`measurementScale` property](https://www.nutrient.io/api/web/classes/NutrientViewer.Annotations.ShapeAnnotation.html#measurementscale) and a [`measurementPrecision` property](https://www.nutrient.io/api/web/classes/NutrientViewer.Annotations.ShapeAnnotation.html#measurementprecision) as its parameters, as demonstrated in the code snippet below: ```js let pspdfkitInstance; // Global or module-level variable. NutrientViewer.load({...baseOptions, theme: NutrientViewer.Theme.DARK, toolbarItems: [...NutrientViewer.defaultToolbarItems, { type: "cloudy-rectangle", dropdownGroup: "shapes" }, { type: "dashed-rectangle", dropdownGroup: "shapes" }, { type: "cloudy-ellipse", dropdownGroup: "shapes" }, { type: "dashed-ellipse", dropdownGroup: "shapes" }, { type: "dashed-polygon", dropdownGroup: "shapes" }, { type: "content-editor", dropdownGroup: "editor" }, { type: "form-creator", dropdownGroup: "editor" }, { type: "measure", dropdownGroup: "editor" }, { type: "document-comparison", dropdownGroup: "editor" }, ], measurementValueConfiguration: (documentScales) => { const customAreaScale = { name: "myCustomAreaScale", scale: { unitFrom: "pt", // Simple string for points. unitTo: "cm", // Simple string for centimeters. fromValue: 1, toValue: 0.05, }, precision: "2", // Simple string for precision. selected: true, }; return [customAreaScale,...documentScales]; }, }).then(async (instance) => { console.log("Nutrient loaded!"); try { // Define the points for a triangle polygon. const points = NutrientViewer.Immutable.List([ new NutrientViewer.Geometry.Point({ x: 100, y: 100 }), new NutrientViewer.Geometry.Point({ x: 200, y: 100 }), new NutrientViewer.Geometry.Point({ x: 150, y: 150 }), ]); // Calculate the precise bounding box. let minX = Infinity; let minY = Infinity; let maxX = -Infinity; let maxY = -Infinity; points.forEach((point) => { minX = Math.min(minX, point.x); minY = Math.min(minY, point.y); maxX = Math.max(maxX, point.x); maxY = Math.max(maxY, point.y); }); const boundingBox = new NutrientViewer.Geometry.Rect({ left: minX, top: minY, width: maxX - minX, height: maxY - minY, }); // Create a polygon annotation with measurement properties. const polygonAnnotation = new NutrientViewer.Annotations.PolygonAnnotation({ pageIndex: 0, points: points, boundingBox: boundingBox, isMeasurement: true, measurementScale: { unitFrom: "pt", // Simple string for points. unitTo: "cm", // Simple string for centimeters. fromValue: 1, toValue: 0.05, // Linear conversion. }, measurementPrecision: "twoDp", }); // Add the annotation to the document. await instance.create(polygonAnnotation); console.log("Polygon annotation with measurement properties created and added."); console.log((await instance.getAnnotations(0)).toJS()); } catch (error) { console.error("Error creating or adding polygon annotation:", error); } }).catch(function (error) { console.error("Error loading PDF:", error.message); }); ``` You can try the code snippet above in our [playground](https://www.nutrient.io/demo/sandbox?p=eyJ2IjoxLCJjc3MiOiIvKiBBZGQgeW91ciBDU1MgaGVyZSAqL1xuXHQiLCJzZXR0aW5ncyI6eyJmaWxlTmFtZSI6ImJhc2ljLnBkZiJ9LCJqcyI6ImxldCBwc3BkZmtpdEluc3RhbmNlOyAvLyBHbG9iYWwgb3IgbW9kdWxlLWxldmVsIHZhcmlhYmxlXG5QU1BERktpdC5sb2FkKHtcbiAgLi4uYmFzZU9wdGlvbnMsXG4gIHRoZW1lOiBQU1BERktpdC5UaGVtZS5EQVJLLFxuICB0b29sYmFySXRlbXM6IFtcbiAgICAuLi5QU1BERktpdC5kZWZhdWx0VG9vbGJhckl0ZW1zLFxuICAgIHsgdHlwZTogXCJjbG91ZHktcmVjdGFuZ2xlXCIsIGRyb3Bkb3duR3JvdXA6IFwic2hhcGVzXCIgfSxcbiAgICB7IHR5cGU6IFwiZGFzaGVkLXJlY3RhbmdsZVwiLCBkcm9wZG93bkdyb3VwOiBcInNoYXBlc1wiIH0sXG4gICAgeyB0eXBlOiBcImNsb3VkeS1lbGxpcHNlXCIsIGRyb3Bkb3duR3JvdXA6IFwic2hhcGVzXCIgfSxcbiAgICB7IHR5cGU6IFwiZGFzaGVkLWVsbGlwc2VcIiwgZHJvcGRvd25Hcm91cDogXCJzaGFwZXNcIiB9LFxuICAgIHsgdHlwZTogXCJkYXNoZWQtcG9seWdvblwiLCBkcm9wZG93bkdyb3VwOiBcInNoYXBlc1wiIH0sXG4gICAgeyB0eXBlOiBcImNvbnRlbnQtZWRpdG9yXCIsIGRyb3Bkb3duR3JvdXA6IFwiZWRpdG9yXCIgfSxcbiAgICB7IHR5cGU6IFwiZm9ybS1jcmVhdG9yXCIsIGRyb3Bkb3duR3JvdXA6IFwiZWRpdG9yXCIgfSxcbiAgICB7IHR5cGU6IFwibWVhc3VyZVwiLCBkcm9wZG93bkdyb3VwOiBcImVkaXRvclwiIH0sXG4gICAgeyB0eXBlOiBcImRvY3VtZW50LWNvbXBhcmlzb25cIiwgZHJvcGRvd25Hcm91cDogXCJlZGl0b3JcIiB9LFxuICBdLFxuICBtZWFzdXJlbWVudFZhbHVlQ29uZmlndXJhdGlvbjogKGRvY3VtZW50U2NhbGVzKSA9PiB7XG4gICAgY29uc3QgY3VzdG9tQXJlYVNjYWxlID0ge1xuICAgICAgbmFtZTogXCJteUN1c3RvbUFyZWFTY2FsZVwiLFxuICAgICAgc2NhbGU6IHtcbiAgICAgICAgdW5pdEZyb206IFwicHRcIiwgLy8gU2ltcGxlIHN0cmluZyBmb3IgcG9pbnRzXG4gICAgICAgIHVuaXRUbzogXCJjbVwiLCAgIC8vIFNpbXBsZSBzdHJpbmcgZm9yIGNlbnRpbWV0ZXJzXG4gICAgICAgIGZyb21WYWx1ZTogMSxcbiAgICAgICAgdG9WYWx1ZTogMC4wNSxcbiAgICAgIH0sXG4gICAgICBwcmVjaXNpb246IFwiMlwiLCAvLyBTaW1wbGUgc3RyaW5nIGZvciBwcmVjaXNpb25cbiAgICAgIHNlbGVjdGVkOiB0cnVlLFxuICAgIH07XG4gICAgcmV0dXJuIFtjdXN0b21BcmVhU2NhbGUsIC4uLmRvY3VtZW50U2NhbGVzXTtcbiAgfSxcbn0pXG4gIC50aGVuKGFzeW5jIChpbnN0YW5jZSkgPT4ge1xuICAgIGNvbnNvbGUubG9nKFwiTnV0cmllbnQgbG9hZGVkIVwiKTtcbiAgICB0cnkge1xuICAgICAgLy8gRGVmaW5lIHRoZSBwb2ludHMgZm9yIGEgdHJpYW5nbGUgcG9seWdvblxuICAgICAgY29uc3QgcG9pbnRzID0gUFNQREZLaXQuSW1tdXRhYmxlLkxpc3QoW1xuICAgICAgICBuZXcgUFNQREZLaXQuR2VvbWV0cnkuUG9pbnQoeyB4OiAxMDAsIHk6IDEwMCB9KSxcbiAgICAgICAgbmV3IFBTUERGS2l0Lkdlb21ldHJ5LlBvaW50KHsgeDogMjAwLCB5OiAxMDAgfSksXG4gICAgICAgIG5ldyBQU1BERktpdC5HZW9tZXRyeS5Qb2ludCh7IHg6IDE1MCwgeTogMTUwIH0pLFxuICAgICAgXSk7XG5cbiAgICAgIC8vIENhbGN1bGF0ZSB0aGUgcHJlY2lzZSBib3VuZGluZyBib3hcbiAgICAgIGxldCBtaW5YID0gSW5maW5pdHk7XG4gICAgICBsZXQgbWluWSA9IEluZmluaXR5O1xuICAgICAgbGV0IG1heFggPSAtSW5maW5pdHk7XG4gICAgICBsZXQgbWF4WSA9IC1JbmZpbml0eTtcbiAgICAgIHBvaW50cy5mb3JFYWNoKChwb2ludCkgPT4ge1xuICAgICAgICBtaW5YID0gTWF0aC5taW4obWluWCwgcG9pbnQueCk7XG4gICAgICAgIG1pblkgPSBNYXRoLm1pbihtaW5ZLCBwb2ludC55KTtcbiAgICAgICAgbWF4WCA9IE1hdGgubWF4KG1heFgsIHBvaW50LngpO1xuICAgICAgICBtYXhZID0gTWF0aC5tYXgobWF4WSwgcG9pbnQueSk7XG4gICAgICB9KTtcbiAgICAgIGNvbnN0IGJvdW5kaW5nQm94ID0gbmV3IFBTUERGS2l0Lkdlb21ldHJ5LlJlY3Qoe1xuICAgICAgICBsZWZ0OiBtaW5YLFxuICAgICAgICB0b3A6IG1pblksXG4gICAgICAgIHdpZHRoOiBtYXhYIC0gbWluWCxcbiAgICAgICAgaGVpZ2h0OiBtYXhZIC0gbWluWSxcbiAgICAgIH0pO1xuXG4gICAgICAvLyBDcmVhdGUgYSBiYXNpYyBwb2x5Z29uIGFubm90YXRpb24gd2l0aCBtZWFzdXJlbWVudCBwcm9wZXJ0aWVzXG4gICAgICBjb25zdCBwb2x5Z29uQW5ub3RhdGlvbiA9IG5ldyBQU1BERktpdC5Bbm5vdGF0aW9ucy5Qb2x5Z29uQW5ub3RhdGlvbih7XG4gICAgICAgIHBhZ2VJbmRleDogMCxcbiAgICAgICAgcG9pbnRzOiBwb2ludHMsXG4gICAgICAgIGJvdW5kaW5nQm94OiBib3VuZGluZ0JveCxcbiAgICAgICAgaXNNZWFzdXJlbWVudDogdHJ1ZSxcbiAgICAgICAgbWVhc3VyZW1lbnRTY2FsZToge1xuICAgICAgICAgIHVuaXRGcm9tOiBcInB0XCIsIC8vIFNpbXBsZSBzdHJpbmcgZm9yIHBvaW50c1xuICAgICAgICAgIHVuaXRUbzogXCJjbVwiLCAgIC8vIFNpbXBsZSBzdHJpbmcgZm9yIGNlbnRpbWV0ZXJzXG4gICAgICAgICAgZnJvbVZhbHVlOiAxLFxuICAgICAgICAgIHRvVmFsdWU6IDAuMDUsIC8vIExpbmVhciBjb252ZXJzaW9uXG4gICAgICAgIH0sXG4gICAgICAgIG1lYXN1cmVtZW50UHJlY2lzaW9uOiBcInR3b0RwXCIsXG4gICAgICB9KTtcblxuICAgICAgLy8gQWRkIHRoZSBhbm5vdGF0aW9uIHRvIHRoZSBkb2N1bWVudFxuICAgICAgYXdhaXQgaW5zdGFuY2UuY3JlYXRlKHBvbHlnb25Bbm5vdGF0aW9uKTtcbiAgICAgIGNvbnNvbGUubG9nKFwiQmFzaWMgcG9seWdvbiBhbm5vdGF0aW9uIHdpdGggbWVhc3VyZW1lbnQgcHJvcGVydGllcyBjcmVhdGVkIGFuZCBhZGRlZC5cIik7XG4gICAgICBjb25zb2xlLmxvZygoYXdhaXQgaW5zdGFuY2UuZ2V0QW5ub3RhdGlvbnMoMCkpLnRvSlMoKSk7XG4gICAgfSBjYXRjaCAoZXJyb3IpIHtcbiAgICAgIGNvbnNvbGUuZXJyb3IoXCJFcnJvciBjcmVhdGluZyBvciBhZGRpbmcgcG9seWdvbiBhbm5vdGF0aW9uOlwiLCBlcnJvcik7XG4gICAgfVxuICB9KVxuICAuY2F0Y2goZnVuY3Rpb24gKGVycm9yKSB7XG4gICAgY29uc29sZS5lcnJvcihcIkVycm9yIGxvYWRpbmcgUERGOlwiLCBlcnJvci5tZXNzYWdlKTtcbiAgfSk7In0%253D). For more information on scale and precision, refer to the [guide on configuring measurements](https://www.nutrient.io/guides/web/measurements/configure-measurements.md). ## Measuring the area of an ellipse Measure the area of an ellipse in one of the following ways: - [Using the built-in user interface (UI)](#measuring-the-area-of-an-ellipse-using-the-built-in-ui) - [Programmatically](#measuring-the-area-of-an-ellipse-programmatically) ### Measuring the area of an ellipse using the built-in UI To measure the area of an ellipse using the built-in UI, follow the steps below: 1. Click the measurement tools icon in the toolbar. 2. Tap **Ellipse Area**. 3. Draw an ellipse around the area you want to measure. ### Measuring the area of an ellipse programmatically To measure the area of an ellipse programmatically, use the [`CircleAnnotation` shape constructor](https://www.nutrient.io/api/web/classes/NutrientViewer.Annotations.EllipseAnnotation.html), which takes a [`measurementScale` property](https://www.nutrient.io/api/web/classes/NutrientViewer.Annotations.ShapeAnnotation.html#measurementscale) and a [`measurementPrecision` property](https://www.nutrient.io/api/web/classes/NutrientViewer.Annotations.ShapeAnnotation.html#measurementprecision) as its parameters, as demonstrated in the code snippet below: ```js let pspdfkitInstance; // Global or module-level variable. NutrientViewer.load({...baseOptions, theme: NutrientViewer.Theme.DARK, toolbarItems: [...NutrientViewer.defaultToolbarItems, { type: "cloudy-rectangle", dropdownGroup: "shapes" }, { type: "dashed-rectangle", dropdownGroup: "shapes" }, { type: "cloudy-ellipse", dropdownGroup: "shapes" }, { type: "dashed-ellipse", dropdownGroup: "shapes" }, { type: "dashed-polygon", dropdownGroup: "shapes" }, { type: "content-editor", dropdownGroup: "editor" }, { type: "form-creator", dropdownGroup: "editor" }, { type: "measure", dropdownGroup: "editor" }, { type: "document-comparison", dropdownGroup: "editor" }, ], measurementValueConfiguration: (documentScales) => { const customAreaScale = { name: "myCustomAreaScale", scale: { unitFrom: "pt", // Simple string for points. unitTo: "cm", // Simple string for centimeters. fromValue: 1, toValue: 0.05, }, precision: "2", selected: true, }; return [customAreaScale,...documentScales]; }, }).then(async (instance) => { console.log("Nutrient loaded!"); try { // Define the bounding box for the ellipse. const ellipseBoundingBox = new NutrientViewer.Geometry.Rect({ left: 150, top: 150, width: 200, height: 100, }); // Calculate the center point of the ellipse. const center = ellipseBoundingBox.center; // Create the ellipse annotation for area measurement. const ellipseAnnotation = new NutrientViewer.Annotations.EllipseAnnotation({ strokeColor: NutrientViewer.Color.BLUE, pageIndex: 0, center: center, radiusX: ellipseBoundingBox.width / 2, radiusY: ellipseBoundingBox.height / 2, boundingBox: ellipseBoundingBox, measurementPrecision: "twoDp", // Using string format. measurementScale: { unitFrom: "pt", // Simple string for points. unitTo: "cm", // Simple string for centimeters. fromValue: 1, toValue: 0.05, // Linear conversion. }, isMeasurement: true, // Marking it as a measurement. }); // Add the annotation to the document. await instance.create(ellipseAnnotation); console.log("Ellipse area measurement annotation created and added."); console.log((await instance.getAnnotations(0)).toJS()); } catch (error) { console.error( "Error creating or adding area measurement annotation:", error ); } }).catch(function (error) { console.error("Error loading PDF:", error.message); }); ``` You can try the code snippet above in our [playground](https://www.nutrient.io/demo/sandbox?p=eyJ2IjoxLCJjc3MiOiIvKiBBZGQgeW91ciBDU1MgaGVyZSAqL1xuIiwic2V0dGluZ3MiOnsiZmlsZU5hbWUiOiJiYXNpYy5wZGYifSwianMiOiJsZXQgcHNwZGZraXRJbnN0YW5jZTsgLy8gR2xvYmFsIG9yIG1vZHVsZS1sZXZlbCB2YXJpYWJsZVxuUFNQREZLaXQubG9hZCh7XG4gIC4uLmJhc2VPcHRpb25zLFxuICB0aGVtZTogUFNQREZLaXQuVGhlbWUuREFSSyxcbiAgdG9vbGJhckl0ZW1zOiBbXG4gICAgLi4uUFNQREZLaXQuZGVmYXVsdFRvb2xiYXJJdGVtcyxcbiAgICB7IHR5cGU6IFwiY2xvdWR5LXJlY3RhbmdsZVwiLCBkcm9wZG93bkdyb3VwOiBcInNoYXBlc1wiIH0sXG4gICAgeyB0eXBlOiBcImRhc2hlZC1yZWN0YW5nbGVcIiwgZHJvcGRvd25Hcm91cDogXCJzaGFwZXNcIiB9LFxuICAgIHsgdHlwZTogXCJjbG91ZHktZWxsaXBzZVwiLCBkcm9wZG93bkdyb3VwOiBcInNoYXBlc1wiIH0sXG4gICAgeyB0eXBlOiBcImRhc2hlZC1lbGxpcHNlXCIsIGRyb3Bkb3duR3JvdXA6IFwic2hhcGVzXCIgfSxcbiAgICB7IHR5cGU6IFwiZGFzaGVkLXBvbHlnb25cIiwgZHJvcGRvd25Hcm91cDogXCJzaGFwZXNcIiB9LFxuICAgIHsgdHlwZTogXCJjb250ZW50LWVkaXRvclwiLCBkcm9wZG93bkdyb3VwOiBcImVkaXRvclwiIH0sXG4gICAgeyB0eXBlOiBcImZvcm0tY3JlYXRvclwiLCBkcm9wZG93bkdyb3VwOiBcImVkaXRvclwiIH0sXG4gICAgeyB0eXBlOiBcIm1lYXN1cmVcIiwgZHJvcGRvd25Hcm91cDogXCJlZGl0b3JcIiB9LFxuICAgIHsgdHlwZTogXCJkb2N1bWVudC1jb21wYXJpc29uXCIsIGRyb3Bkb3duR3JvdXA6IFwiZWRpdG9yXCIgfSxcbiAgXSxcbiAgbWVhc3VyZW1lbnRWYWx1ZUNvbmZpZ3VyYXRpb246IChkb2N1bWVudFNjYWxlcykgPT4ge1xuICAgIGNvbnN0IGN1c3RvbUFyZWFTY2FsZSA9IHtcbiAgICAgIG5hbWU6IFwibXlDdXN0b21BcmVhU2NhbGVcIixcbiAgICAgIHNjYWxlOiB7XG4gICAgICAgIHVuaXRGcm9tOiBcInB0XCIsIC8vIFNpbXBsZSBzdHJpbmcgZm9yIHBvaW50c1xuICAgICAgICB1bml0VG86IFwiY21cIiwgICAvLyBTaW1wbGUgc3RyaW5nIGZvciBjZW50aW1ldGVyc1xuICAgICAgICBmcm9tVmFsdWU6IDEsXG4gICAgICAgIHRvVmFsdWU6IDAuMDUsXG4gICAgICB9LFxuICAgICAgcHJlY2lzaW9uOiBcIjJcIixcbiAgICAgIHNlbGVjdGVkOiB0cnVlLFxuICAgIH07XG4gICAgcmV0dXJuIFtjdXN0b21BcmVhU2NhbGUsIC4uLmRvY3VtZW50U2NhbGVzXTtcbiAgfSxcbn0pXG4gIC50aGVuKGFzeW5jIChpbnN0YW5jZSkgPT4ge1xuICAgIGNvbnNvbGUubG9nKFwiTnV0cmllbnQgbG9hZGVkIVwiKTtcbiAgICB0cnkge1xuICAgICAgLy8gRGVmaW5lIHRoZSBib3VuZGluZyBib3ggZm9yIHRoZSBlbGxpcHNlXG4gICAgICBjb25zdCBlbGxpcHNlQm91bmRpbmdCb3ggPSBuZXcgUFNQREZLaXQuR2VvbWV0cnkuUmVjdCh7XG4gICAgICAgIGxlZnQ6IDE1MCxcbiAgICAgICAgdG9wOiAxNTAsXG4gICAgICAgIHdpZHRoOiAyMDAsXG4gICAgICAgIGhlaWdodDogMTAwLFxuICAgICAgfSk7XG5cbiAgICAgIC8vIENhbGN1bGF0ZSB0aGUgY2VudGVyIHBvaW50IG9mIHRoZSBlbGxpcHNlXG4gICAgICBjb25zdCBjZW50ZXIgPSBlbGxpcHNlQm91bmRpbmdCb3guY2VudGVyO1xuXG4gICAgICAvLyBDcmVhdGUgdGhlIGVsbGlwc2UgYW5ub3RhdGlvbiBmb3IgYXJlYSBtZWFzdXJlbWVudFxuICAgICAgY29uc3QgZWxsaXBzZUFubm90YXRpb24gPSBuZXcgUFNQREZLaXQuQW5ub3RhdGlvbnMuRWxsaXBzZUFubm90YXRpb24oe1xuICAgICAgICBzdHJva2VDb2xvcjogUFNQREZLaXQuQ29sb3IuQkxVRSxcbiAgICAgICAgcGFnZUluZGV4OiAwLFxuICAgICAgICBjZW50ZXI6IGNlbnRlcixcbiAgICAgICAgcmFkaXVzWDogZWxsaXBzZUJvdW5kaW5nQm94LndpZHRoIC8gMixcbiAgICAgICAgcmFkaXVzWTogZWxsaXBzZUJvdW5kaW5nQm94LmhlaWdodCAvIDIsXG4gICAgICAgIGJvdW5kaW5nQm94OiBlbGxpcHNlQm91bmRpbmdCb3gsXG4gICAgICAgIG1lYXN1cmVtZW50UHJlY2lzaW9uOiBcInR3b0RwXCIsIC8vIFVzaW5nIHN0cmluZyBmb3JtYXRcbiAgICAgICAgbWVhc3VyZW1lbnRTY2FsZToge1xuICAgICAgICAgIHVuaXRGcm9tOiBcInB0XCIsIC8vIFNpbXBsZSBzdHJpbmcgZm9yIHBvaW50c1xuICAgICAgICAgIHVuaXRUbzogXCJjbVwiLCAgIC8vIFNpbXBsZSBzdHJpbmcgZm9yIGNlbnRpbWV0ZXJzXG4gICAgICAgICAgZnJvbVZhbHVlOiAxLFxuICAgICAgICAgIHRvVmFsdWU6IDAuMDUsIC8vIExpbmVhciBjb252ZXJzaW9uXG4gICAgICAgIH0sXG4gICAgICAgIGlzTWVhc3VyZW1lbnQ6IHRydWUsIC8vIEV4cGxpY2l0bHkgbWFyayBpdCBhcyBhIG1lYXN1cmVtZW50XG4gICAgICB9KTtcblxuICAgICAgLy8gQWRkIHRoZSBhbm5vdGF0aW9uIHRvIHRoZSBkb2N1bWVudFxuICAgICAgYXdhaXQgaW5zdGFuY2UuY3JlYXRlKGVsbGlwc2VBbm5vdGF0aW9uKTtcbiAgICAgIGNvbnNvbGUubG9nKFwiRWxsaXBzZSBhcmVhIG1lYXN1cmVtZW50IGFubm90YXRpb24gY3JlYXRlZCBhbmQgYWRkZWQuXCIpO1xuICAgICAgY29uc29sZS5sb2coKGF3YWl0IGluc3RhbmNlLmdldEFubm90YXRpb25zKDApKS50b0pTKCkpO1xuICAgIH0gY2F0Y2ggKGVycm9yKSB7XG4gICAgICBjb25zb2xlLmVycm9yKFwiRXJyb3IgY3JlYXRpbmcgb3IgYWRkaW5nIGFyZWEgbWVhc3VyZW1lbnQgYW5ub3RhdGlvbjpcIiwgZXJyb3IpO1xuICAgIH1cbiAgfSlcbiAgLmNhdGNoKGZ1bmN0aW9uIChlcnJvcikge1xuICAgIGNvbnNvbGUuZXJyb3IoXCJFcnJvciBsb2FkaW5nIFBERjpcIiwgZXJyb3IubWVzc2FnZSk7XG4gIH0pOyJ9). For more information on scale and precision, refer to the [guide on configuring measurements](https://www.nutrient.io/guides/web/measurements/configure-measurements.md). ## Measuring the area of a rectangle Measure the area of a rectangle in one of the following ways: - [Using the built-in user interface (UI)](#measuring-the-area-of-a-rectangle-using-the-built-in-ui) - [Programmatically](#measuring-the-area-of-a-rectangle-programmatically) ### Measuring the area of a rectangle using the built-in UI To measure the area of a rectangle using the built-in UI, follow the steps below: 1. Click the measurement tools icon in the toolbar. 2. Tap **Rectangle Area**. 3. Draw a rectangle around the area you want to measure. ### Measuring the area of a rectangle programmatically To measure the area of a rectangle programmatically, use the [`SquareAnnotation` shape constructor](https://www.nutrient.io/api/web/classes/NutrientViewer.Annotations.RectangleAnnotation.html), which takes a [`measurementPrecision` property](https://www.nutrient.io/api/web/classes/NutrientViewer.Annotations.ShapeAnnotation.html#measurementscale) and a [`measurementPrecision` property](https://www.nutrient.io/api/web/classes/NutrientViewer.Annotations.ShapeAnnotation.html#measurementprecision) as its parameters, as demonstrated in the code snippet below: ```js let pspdfkitInstance; // Global or module-level variable. NutrientViewer.load({...baseOptions, theme: NutrientViewer.Theme.DARK, toolbarItems: [...NutrientViewer.defaultToolbarItems, { type: "cloudy-rectangle", dropdownGroup: "shapes" }, { type: "dashed-rectangle", dropdownGroup: "shapes" }, { type: "cloudy-ellipse", dropdownGroup: "shapes" }, { type: "dashed-ellipse", dropdownGroup: "shapes" }, { type: "dashed-polygon", dropdownGroup: "shapes" }, { type: "content-editor", dropdownGroup: "editor" }, { type: "form-creator", dropdownGroup: "editor" }, { type: "measure", dropdownGroup: "editor" }, { type: "document-comparison", dropdownGroup: "editor" }, ], measurementValueConfiguration: (documentScales) => { const customAreaScale = { name: "myCustomAreaScale", scale: { unitFrom: "pt", // Simple string for points. unitTo: "cm", // Simple string for centimeters. fromValue: 1, toValue: 0.05, }, precision: "2", // Simple string for precision. selected: true, }; return [customAreaScale,...documentScales]; }, }).then(async (instance) => { console.log("Nutrient loaded!"); try { // Define the bounding box for the rectangle. const rectangleBoundingBox = new NutrientViewer.Geometry.Rect({ left: 100, top: 100, width: 200, height: 100, }); // Create a rectangle annotation with `isMeasurement` and a linear `measurementScale`. const rectangleAnnotation = new NutrientViewer.Annotations.RectangleAnnotation({ pageIndex: 0, boundingBox: rectangleBoundingBox, isMeasurement: true, measurementScale: { unitFrom: "pt", // Simple string for points. unitTo: "cm", // Simple string for centimeters. fromValue: 1, toValue: 0.05, // Linear conversion factor }, measurementPrecision: "twoDp", // Set `measurementPrecision`. }); // Add the annotation to the document. await instance.create(rectangleAnnotation); console.log("Rectangle annotation with linear measurementScale created and added."); console.log((await instance.getAnnotations(0)).toJS()); } catch (error) { console.error("Error creating or adding rectangle annotation:", error); } }).catch(function (error) { console.error("Error loading PDF:", error.message); }); ``` You can try the code snippet above in our [playground](https://www.nutrient.io/demo/sandbox?p=eyJ2IjoxLCJjc3MiOiIvKiBBZGQgeW91ciBDU1MgaGVyZSAqL1xuIiwic2V0dGluZ3MiOnsiZmlsZU5hbWUiOiJiYXNpYy5wZGYifSwianMiOiJsZXQgcHNwZGZraXRJbnN0YW5jZTsgLy8gR2xvYmFsIG9yIG1vZHVsZS1sZXZlbCB2YXJpYWJsZVxuUFNQREZLaXQubG9hZCh7XG4gIC4uLmJhc2VPcHRpb25zLFxuICB0aGVtZTogUFNQREZLaXQuVGhlbWUuREFSSyxcbiAgdG9vbGJhckl0ZW1zOiBbXG4gICAgLi4uUFNQREZLaXQuZGVmYXVsdFRvb2xiYXJJdGVtcyxcbiAgICB7IHR5cGU6IFwiY2xvdWR5LXJlY3RhbmdsZVwiLCBkcm9wZG93bkdyb3VwOiBcInNoYXBlc1wiIH0sXG4gICAgeyB0eXBlOiBcImRhc2hlZC1yZWN0YW5nbGVcIiwgZHJvcGRvd25Hcm91cDogXCJzaGFwZXNcIiB9LFxuICAgIHsgdHlwZTogXCJjbG91ZHktZWxsaXBzZVwiLCBkcm9wZG93bkdyb3VwOiBcInNoYXBlc1wiIH0sXG4gICAgeyB0eXBlOiBcImRhc2hlZC1lbGxpcHNlXCIsIGRyb3Bkb3duR3JvdXA6IFwic2hhcGVzXCIgfSxcbiAgICB7IHR5cGU6IFwiZGFzaGVkLXBvbHlnb25cIiwgZHJvcGRvd25Hcm91cDogXCJzaGFwZXNcIiB9LFxuICAgIHsgdHlwZTogXCJjb250ZW50LWVkaXRvclwiLCBkcm9wZG93bkdyb3VwOiBcImVkaXRvclwiIH0sXG4gICAgeyB0eXBlOiBcImZvcm0tY3JlYXRvclwiLCBkcm9wZG93bkdyb3VwOiBcImVkaXRvclwiIH0sXG4gICAgeyB0eXBlOiBcIm1lYXN1cmVcIiwgZHJvcGRvd25Hcm91cDogXCJlZGl0b3JcIiB9LFxuICAgIHsgdHlwZTogXCJkb2N1bWVudC1jb21wYXJpc29uXCIsIGRyb3Bkb3duR3JvdXA6IFwiZWRpdG9yXCIgfSxcbiAgXSxcbiAgbWVhc3VyZW1lbnRWYWx1ZUNvbmZpZ3VyYXRpb246IChkb2N1bWVudFNjYWxlcykgPT4ge1xuICAgIGNvbnN0IGN1c3RvbUFyZWFTY2FsZSA9IHtcbiAgICAgIG5hbWU6IFwibXlDdXN0b21BcmVhU2NhbGVcIixcbiAgICAgIHNjYWxlOiB7XG4gICAgICAgIHVuaXRGcm9tOiBcInB0XCIsIC8vIFNpbXBsZSBzdHJpbmcgZm9yIHBvaW50c1xuICAgICAgICB1bml0VG86IFwiY21cIiwgICAvLyBTaW1wbGUgc3RyaW5nIGZvciBjZW50aW1ldGVyc1xuICAgICAgICBmcm9tVmFsdWU6IDEsXG4gICAgICAgIHRvVmFsdWU6IDAuMDUsXG4gICAgICB9LFxuICAgICAgcHJlY2lzaW9uOiBcIjJcIiwgLy8gU2ltcGxlIHN0cmluZyBmb3IgcHJlY2lzaW9uXG4gICAgICBzZWxlY3RlZDogdHJ1ZSxcbiAgICB9O1xuICAgIHJldHVybiBbY3VzdG9tQXJlYVNjYWxlLCAuLi5kb2N1bWVudFNjYWxlc107XG4gIH0sXG59KVxuICAudGhlbihhc3luYyAoaW5zdGFuY2UpID0%252BIHtcbiAgICBjb25zb2xlLmxvZyhcIk51dHJpZW50IGxvYWRlZCFcIik7XG4gICAgdHJ5IHtcbiAgICAgIC8vIERlZmluZSB0aGUgYm91bmRpbmcgYm94IGZvciB0aGUgcmVjdGFuZ2xlXG4gICAgICBjb25zdCByZWN0YW5nbGVCb3VuZGluZ0JveCA9IG5ldyBQU1BERktpdC5HZW9tZXRyeS5SZWN0KHtcbiAgICAgICAgbGVmdDogMTAwLFxuICAgICAgICB0b3A6IDEwMCxcbiAgICAgICAgd2lkdGg6IDIwMCxcbiAgICAgICAgaGVpZ2h0OiAxMDAsXG4gICAgICB9KTtcblxuICAgICAgLy8gQ3JlYXRlIGEgYmFzaWMgcmVjdGFuZ2xlIGFubm90YXRpb24gd2l0aCBpc01lYXN1cmVtZW50IGFuZCBhIGxpbmVhciBtZWFzdXJlbWVudFNjYWxlXG4gICAgICBjb25zdCByZWN0YW5nbGVBbm5vdGF0aW9uID0gbmV3IFBTUERGS2l0LkFubm90YXRpb25zLlJlY3RhbmdsZUFubm90YXRpb24oe1xuICAgICAgICBwYWdlSW5kZXg6IDAsXG4gICAgICAgIGJvdW5kaW5nQm94OiByZWN0YW5nbGVCb3VuZGluZ0JveCxcbiAgICAgICAgaXNNZWFzdXJlbWVudDogdHJ1ZSxcbiAgICAgICAgbWVhc3VyZW1lbnRTY2FsZToge1xuICAgICAgICAgIHVuaXRGcm9tOiBcInB0XCIsIC8vIFNpbXBsZSBzdHJpbmcgZm9yIHBvaW50c1xuICAgICAgICAgIHVuaXRUbzogXCJjbVwiLCAgIC8vIFNpbXBsZSBzdHJpbmcgZm9yIGNlbnRpbWV0ZXJzXG4gICAgICAgICAgZnJvbVZhbHVlOiAxLFxuICAgICAgICAgIHRvVmFsdWU6IDAuMDUsIC8vIExpbmVhciBjb252ZXJzaW9uIGZhY3RvclxuICAgICAgICB9LFxuICAgICAgICBtZWFzdXJlbWVudFByZWNpc2lvbjogXCJ0d29EcFwiLCAvLyBFeHBsaWNpdGx5IHNldCBtZWFzdXJlbWVudFByZWNpc2lvblxuICAgICAgfSk7XG5cbiAgICAgIC8vIEFkZCB0aGUgYW5ub3RhdGlvbiB0byB0aGUgZG9jdW1lbnRcbiAgICAgIGF3YWl0IGluc3RhbmNlLmNyZWF0ZShyZWN0YW5nbGVBbm5vdGF0aW9uKTtcbiAgICAgIGNvbnNvbGUubG9nKFwiUmVjdGFuZ2xlIGFubm90YXRpb24gd2l0aCBsaW5lYXIgbWVhc3VyZW1lbnRTY2FsZSBjcmVhdGVkIGFuZCBhZGRlZC5cIik7XG4gICAgICBjb25zb2xlLmxvZygoYXdhaXQgaW5zdGFuY2UuZ2V0QW5ub3RhdGlvbnMoMCkpLnRvSlMoKSk7XG4gICAgfSBjYXRjaCAoZXJyb3IpIHtcbiAgICAgIGNvbnNvbGUuZXJyb3IoXCJFcnJvciBjcmVhdGluZyBvciBhZGRpbmcgcmVjdGFuZ2xlIGFubm90YXRpb246XCIsIGVycm9yKTtcbiAgICB9XG4gIH0pXG4gIC5jYXRjaChmdW5jdGlvbiAoZXJyb3IpIHtcbiAgICBjb25zb2xlLmVycm9yKFwiRXJyb3IgbG9hZGluZyBQREY6XCIsIGVycm9yLm1lc3NhZ2UpO1xuICB9KTsifQ%253D%253D). For more information on scale and precision, refer to the [guide on configuring measurements](https://www.nutrient.io/guides/web/measurements/configure-measurements.md). ## Configuring measurements For more information on configuring measurements, refer to the [guide on configuring measurements](https://www.nutrient.io/guides/web/measurements/configure-measurements.md). --- ## Related pages - [Configure measurements in a PDF using JavaScript](/guides/web/measurements/configure-measurements.md) - [Measure distance and area in a PDF using JavaScript](/guides/web/measurements.md) - [Measure distance in a PDF using JavaScript](/guides/web/measurements/measure-distance.md)