Rough Notation

You can install Rough Notation via npm, use the ES module directly from unpkg, or use the IIFE version which creates a RoughNotation object in your global scope.

npm install --save rough-notation

<!-- ES module -->
<script type="module" src="https://unpkg.com/rough-notation?module"></script>

<!-- IIFE version -->
<script src="https://unpkg.com/rough-notation/lib/rough-notation.iife.js"></script>

Use the annotate function by passing the target DOM element and a configuration object. To make the annotation visible, call the .show() method on the returned annotation object.

Note: Rough Notation adds an SVG element as a sibling to the target element. To avoid layout issues (e.g., inside a <table>), wrap your content in an inner <span> or <div> before annotating.

import { annotate } from 'rough-notation';

const e = document.querySelector('#myElement');
const annotation = annotate(e, { type: 'underline' });
annotation.show();

To control the sequence of animations, use annotationGroup. Pass an array of annotation objects to annotationGroup(). When you call .show() on the group, the annotations will animate one after another in the order they appear in the array.

import { annotate, annotationGroup } from 'rough-notation';

const a1 = annotate(document.querySelector('#e1'), { type: 'underline' });
const a2 = annotate(document.querySelector('#e3'), { type: 'box' });
const a3 = annotate(document.querySelector('#e3'), { type: 'circle' });

const ag = annotationGroup([a3, a1, a2]);
ag.show();

The annotationGroup function returns a group object used to manage multiple annotations as a single unit.

Methods:

• show(): Draws all annotations in the group in the specified order.
• hide(): Hides all annotations in the group immediately (not animated).

The annotate function returns an annotation object. You can use its methods to control visibility or update its properties dynamically (except for type).

Methods:

• isShowing(): Returns true if the annotation is currently visible.
• show(): Draws/animates the annotation. Calling this again re-renders it to match current element size/location. To re-animate, call hide() then show().
• hide(): Hides the annotation immediately (not animated).
• remove(): Unlinks the annotation from the element.

Updating Styles: Properties like color can be updated after the annotation is created.

const e = document.querySelector('#myElement');
const annotation = annotate(e, { type: 'underline', color: 'red' });
annotation.show();

// Update color dynamically
annotation.color = 'green';

A RoughAnnotation instance provides methods and properties to control the lifecycle and appearance of the annotation attached to an element.

Methods

• show(): Displays the annotation.
• hide(): Removes the annotation from view.
• remove(): Completely removes the annotation and its associated SVG from the DOM.
• isShowing(): Returns true if the annotation is currently visible.

Properties

You can dynamically update the following properties, which will trigger a refresh of the annotation:

• animate: Boolean to enable/disable animation.
• animationDuration: The duration of the animation.
• iterations: Number of times the animation should repeat.
• color: The color of the annotation.
• strokeWidth: The thickness of the annotation stroke.
• padding: The padding around the annotated element.