> 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/annotation/annotation-types/arcannotation.md). # Work with Arc Annotations in WebViewer Learn how to create arcs in PDF documents using WebViewer. Explore how arc annotations render arcs on a document with three path points: start, middle, and end. Find out more about the properties, met {% hint style="warning" %} Arcs are not officially part of the PDF specification, but can be created through WebViewer and viewed in other viewers as [free hand](/web/annotation/annotation-types/freehandannotation.md) annotations. {% endhint %} Arc annotations render arcs on a document utilizing three path points: a start, middle and end. The middle point helps define the curve as arcs are drawn from each end towards the middle point. Arc annotations can only use the stroke color. Border styles are not supported but the stroke thickness can be adjusted. ![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-1f41c720b667487f9d800d6218c5b7eee0abf07d%2F783326cb3cbcbb7d4133f4b0a5af47d11d522831-267x147.png?alt=media) ## Instantiation {% tabs %} {% tab title="JavaScript" %} {% code lineNumbers="true" %} ```js WebViewer(...) .then(instance => { const { Core } = instance; const { documentViewer, annotationManager, Annotations } = Core; documentViewer.addEventListener('annotationsLoaded', () => { const annot = new Annotations.ArcAnnotation({ PageNumber: 1, StrokeColor: new Annotations.Color(0, 255, 0, 1), Path: [ [50, 50], [75, 100], [100, 50], ], }); annotationManager.addAnnotation(annot); annotationManager.redrawAnnotation(annot); }); }); ``` {% endcode %} {% endtab %} {% endtabs %} [AnnotationManager#annotationsLoaded](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#event:annotationsLoaded) [ArcAnnotation](https://sdk.apryse.com/api/web/Core.Annotations.ArcAnnotation.html) [Color](https://sdk.apryse.com/api/web/Core.Annotations.Color.html) [AnnotationManager.addAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#addAnnotation) [AnnotationManager.redrawAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#redrawAnnotation) {% hint style="warning" %} This annotation type is only supported in WebViewer 8.4+. {% endhint %} ## XFDF Element name: `ink` {% tabs %} {% tab title="Shell" %} {% code lineNumbers="true" %} ```sh ... 227.78000007288267,650.3300000159206;229.58678742495061,643.6739652018553;232.04904306283828,637.2315605921359;235.1421649421254,631.0671565640471;238.83524761144423,625.2423458049562;243.09139100953377,619.8153278985419;247.86806915845432,614.8403278137914;253.11755506910168,610.3670541070351;258.7873976135061,606.4402022504831;264.8209455991645,603.0990080498417;271.15791380903005,600.3768556131115;277.734985351473,598.3009437876165;284.486444301732,596.8920143981117;291.3448323137117,596.1641450013269;298.2416226414781,596.1246082276734;305.1079048358519,596.7737991155241;311.87507327483803,598.1052311641217;318.47551264832265,600.1056011445496;324.84327354790105,602.7549220211977;330.9147314115666,606.0267226556155;336.6292222393026,609.8883122973775;341.9296487277179,614.3011072192551;346.7630507674283,619.2210162330648;351.0811346029633,624.5988812342464;354.84075536800697,630.3809683733939;358.0043481746404,636.5095049471169;360.54030344928447,642.9232566437955;362.4232827651103,649.558139376581;363.63447201522433,656.347859590408;363.89,658.67 227.78,650.33;295.18826568609194,665.0547970582759 295.18826568609194,665.0547970582759;363.89,658.67 227.78,650.33;340.28,612.83;363.89,658.67 ``` {% endcode %} {% endtab %} {% endtabs %} ## Required properties ### PageNumber Gets or sets the page number of a document that the annotation appears on. ### Path Gets or sets the 3 points defining the arc. The input must be a set of x/y coordinates in the following format: `[[x,y],[x,y],[x,y]]`. ## Notable properties For the full list of properties, please visit the annotation's [API docs](https://sdk.apryse.com/api/web/Core.Annotations.ArcAnnotation.html). ### StrokeColor Gets or sets the color of the annotation's stroke. ### StrokeThickness Gets or sets the width of the annotation's stroke outline. ### Angle Gets the current sweep angle in degrees. ### Radius Gets the current radius. ### Length Gets the current length. ### Author The author of the annotation. ### Color Gets or sets the annotation's stroke color. ### Hidden Gets or sets whether the annotation is hidden. ### Invisible Gets or sets whether the annotation is invisible, only if it is an unknown annotation type. Generally for hiding annotations you should use "Hidden". ### IsClickableOutsideRect Gets or sets whether any parts of the annotation drawn outside of the rect are clickable. ### Listable Gets or sets whether the annotation should be listed in annotation lists. If set to false, the annotation will also become unselectable. ### Locked Gets or sets whether the annotation is locked or not. If it's locked it can't be edited or deleted, but the note can be edited. ### LockedContents Gets or sets whether the annotation contents are locked or not. If the contents are locked then note can't be edited but the annotation can be edited or deleted. ### NoDelete Gets or sets if this annotation can be deleted. ### NoMove Gets or sets whether or not the annotation can be moved. ### NoResize Gets or sets if this annotation can be resized by the user. ### NoRotate Gets or sets if this annotation can be rotated. ### NoView Gets or sets whether the annotation is visible on the screen. Differs from Hidden in that it can still be printed if the print flag is set. ### NoZoom Gets or sets if this annotation scales with the page. ### Printable Gets or sets whether the annotation should be displayed when printing the page. ### ReadOnly Gets or sets whether the annotation is readonly or not. If it's readonly both the annotation itself and its note can't be edited or deleted. ### ToggleNoView Gets or sets whether the ToggleNoView flag is set on the annotation. ## Useful methods ### getPath To get the points that are used to create the arc, you can use [`getPath`](https://sdk.apryse.com/api/web/Core.Annotations.ArcAnnotation.html#getPath) to get an array of three points. {% tabs %} {% tab title="JavaScript" %} {% code lineNumbers="true" %} ```js WebViewer(...) .then(instance => { const { documentViewer, annotationManager, Annotations } = instance.Core; documentViewer.addEventListener('annotationsLoaded', () => { const annotList = annotationManager.getAnnotationsList(); annotList.forEach(annot => { if (annot instanceof Annotations.ArcAnnotation) { const points = annot.getPath(); points.forEach(point => { // Work with points }); } }); }); }); ``` {% endcode %} {% endtab %} {% endtabs %} [ArcAnnotation.getPath](https://sdk.apryse.com/api/web/Core.Annotations.ArcAnnotation.html#getPath) ### addPathPoint When initializing an arc annotation, you can use the [`addPathPoint`](https://sdk.apryse.com/api/web/Core.Annotations.ArcAnnotation.html#addPathPoint) API to add points the annotation path. The arc annotation will only use the first three points. {% tabs %} {% tab title="JavaScript" %} {% code lineNumbers="true" %} ```js WebViewer(...) .then(instance => { const { Core } = instance; const { documentViewer, annotationManager, Annotations } = Core; documentViewer.addEventListener('annotationsLoaded', () => { const annot = new Annotations.ArcAnnotation({ PageNumber: 1, StrokeColor: new Annotations.Color(0, 255, 0, 1), }); annot.addPathPoint(50, 50, 0); annot.addPathPoint(75, 100, 0); annot.addPathPoint(100, 50, 0); annotationManager.addAnnotation(annot); annotationManager.redrawAnnotation(annot); }); }); ``` {% endcode %} {% endtab %} {% endtabs %} [ArcAnnotation.addPathPoint](https://sdk.apryse.com/api/web/Core.Annotations.ArcAnnotation.html#addPathPoint) ### getPathPoint If you know which point on the annotation path you would like to get, you can use [`getPathPoint`](https://sdk.apryse.com/api/web/Core.Annotations.ArcAnnotation.html#getPathPoint) with the point index to retrieve the point. ### setPathPoint Setting the path points on the free hand annotation can be done through the [`setPathPoint`](https://sdk.apryse.com/api/web/Core.Annotations.ArcAnnotation.html#setPathPoint). This can be used to initialize the points of the annotation if that was not done at the start. Since free hand annotations contain multiple paths, a path index can be provided. If one was not provided, the first path will be used by default. {% tabs %} {% tab title="JavaScript" %} {% code lineNumbers="true" %} ```js WebViewer(...) .then(instance => { const { documentViewer, annotationManager, Annotations } = instance.Core; documentViewer.addEventListener('annotationsLoaded', () => { const annotList = annotationManager.getAnnotationsList(); annotList.forEach(annot => { if (annot instanceof Annotations.ArcAnnotation) { annot.setPathPoint(0, 50, 100); annot.setPathPoint(1, 250, 150); } }); }); }); ``` {% endcode %} {% endtab %} {% endtabs %} [ArcAnnotation.setPathPoint](https://sdk.apryse.com/api/web/Core.Annotations.ArcAnnotation.html#setPathPoint) --- # 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/annotation/annotation-types/arcannotation.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.