Adding and Controlling Overline, Strikethrough, and Underline Text Decorations in Fabric.js

Text decoration properties are straightforward to assign during IText initialization via the nested styles object. The top-level keys in styles represent zero-indexed line numbers, while each nested object uses zero-indexed character positions as keys, holding individual decoration boolean flags: overline, linethrough, and underline.

The toggleTextDecor function works for all three decorations by accepting a parameter for the property name. It checks if the active object is an editable IText, then handles two states:

  1. Editing mode: Checks the selected range’s style to determine if it should enable or disable the decoration uniformly across the selection
  2. Non-editing selection mode: Toggles the decoration both globally on the IText instance and individually per character style to ensure consistency when switching back to editing

Tags: fabric.js Canvas Text Decorations IText Frontend Development

Posted on Tue, 06 Oct 2026 16:47:24 +0000 by laeelin