How to Customize the Appearance of RoughNotation Annotations

RoughNotation annotations are customizable through properties passed when you create an annotation. According to the library's documentation, the configurable properties include color, strokeWidth, and animation duration. You can also skip the animation entirely so the annotation appears immediately when show is called. The exact property names and accepted values are documented on the project's GitHub repository, which is the authoritative reference for the current API.

What You Can Configure

The documentation lists these styling properties:

These are described as "various properties of the annotation" that can be configured, so treat the list above as the documented set rather than an exhaustive enumeration of every possible option.

How the Properties Affect the Visual Result

• color changes the ink color of the annotation. This matters most for styles like underline, box, circle, strike-through, crossed-off, and brackets, where the stroke is the visible element. For the highlight style, color determines the shade of the highlighter effect.
• strokeWidth changes how thick or thin the hand-drawn line looks. A larger value produces a bolder, more marker-like stroke; a smaller value produces a finer pen-like stroke.
• animationDuration changes the timing of the draw-on animation. A longer duration makes the annotation appear more slowly and deliberately; a shorter duration makes it snap into place faster.

Because these are the documented knobs, changing any one of them changes only that aspect of the appearance — the annotation style itself (underline, box, circle, highlight, strike-through, crossed-off, brackets) is chosen separately.

Turning Off the Animation

Animation is optional. The documentation states that you don't have to animate the annotation — it "just shows up when show is called." So if you want a static annotation with no draw-on effect, you configure the annotation without relying on the animation, and it renders immediately on show.

Choosing an Annotation Style First

Styling applies on top of a chosen style. RoughNotation supports these annotation types, each of which can then be styled with the properties above:

• Underline — a sketchy underline below an element
• Box — a box drawn around the element
• Circle — a circle drawn around the element
• Highlight — a highlighter-style highlight effect
• Strike-Through — a hand-drawn line through an element
• Crossed-Off — a crossed-off effect symbolizing rejection
• Brackets — a hand-drawn bracket around a block, on one or multiple sides
• Multiple lines — annotating inline content that spans multiple lines

Where to Confirm Exact Syntax

The page states that all the code and documentation is available on GitHub, with a "View on Github" link, and that you can reach out on Twitter at @preetster. Since the page evidence describes the properties but does not show the exact constructor/option syntax, check the GitHub documentation for the precise property names, value formats, and defaults before writing production code.