Shadows and outlines

A drop shadow and an outline make text stand out from a busy background. Together with the letters' color they make looks such as a sticker, a retro offset or a neon glow. The text stays editable with any of them. The library blurs the shadow itself instead of leaving it to the browser, so a shadow looks the same in every browser and in an export.

Add a drop shadow

// Konva: const rt = enableRichText(stage)
rt.manager.setShadow({ color: "rgba(0, 0, 0, 0.4)", offsetX: 3, offsetY: 4, blur: 8 });
rt.manager.setShadow(null); // remove it

// Plain canvas: const rt = createCanvasRichText({ onChange: render })
rt.setShadow({ color: "rgba(0, 0, 0, 0.4)", offsetX: 3, offsetY: 4, blur: 8 });

The shadow belongs to the whole box, not to a selection: setShadow changes the shadow of every box it reaches, even while some words are selected. To change boxes you name instead of the selected box, pass them as the optional last argument: rt.manager.setShadow(shadow, [headline]). Each call is one undo step.

The shadow follows the shapes that are drawn: the letters with their outlines, underlines, list markers and curves. It stays visible while the text is edited. When the type is scaled, by a corner handle or by scaleFontSize on a box that is not being edited, the shadow's offsets and blur scale with it. A shadow changes only how the text is drawn, never where lines break.

To show the current shadow in your controls, read it from the box's document: box.getDocument().shadow is the shadow, or undefined when the box has none.

Add an outline

rt.manager.setStrokeWidth(3); // pixels; 0 removes the outline
rt.manager.setStrokeColor("#FF7903"); // any CSS color

An outline is a character style, unlike the shadow: it changes the selected words while someone edits the box, or all of the box's text when the box is only selected, like the other character styles. If none of those letters has an outline color yet, setStrokeWidth uses black. The outline color shows only where the outline width is above 0.

The outline is drawn behind the letters, so it never covers their color: only the part of the outline outside each letter shows. Inside a scaled Konva group, the width is read and set in pixels as it looks on screen.

Combine them into a look

A look is three settings: the letters' color, an outline and a shadow. These recipes are the ones in the live demo. Each takes the font size, f, so the outline and shadow keep their proportions at any size. Each command is its own undo step.

// Drop shadow: a soft shadow straight below the letters
function dropShadow(f: number) {
  rt.manager.setColor("#5E2DC1");
  rt.manager.setStrokeWidth(0);
  rt.manager.setShadow({ color: "rgba(27, 17, 48, 0.3)", offsetX: 0, offsetY: 0.05 * f, blur: 0.1 * f });
}

// Sticker: orange letters in a thick dark outline, on a small soft shadow
function sticker(f: number) {
  rt.manager.setColor("#FF7903");
  rt.manager.setStrokeColor("#1B1130");
  rt.manager.setStrokeWidth(0.18 * f);
  rt.manager.setShadow({ color: "rgba(27, 17, 48, 0.3)", offsetX: 0.035 * f, offsetY: 0.035 * f, blur: 0.02 * f });
}

// Neon: light letters in a purple outline, with a purple glow all around
function neon(f: number) {
  rt.manager.setColor("#8661D0");
  rt.manager.setStrokeColor("#5E2DC1");
  rt.manager.setStrokeWidth(0.09 * f);
  rt.manager.setShadow({ color: "#5E2DC1", offsetX: 0, offsetY: 0, blur: 0.12 * f });
}

The demo's other looks use the same three settings:

A glow is a shadow with no offset and a blur. An outline in the background's color, under an offset shadow, separates the letters from their shadow.

In the document

The shadow is saved as the document's shadow. Outlines are saved on runs of text as strokeColor and strokeWidth.

{
  "shadow": { "color": "rgba(0, 0, 0, 0.4)", "offsetX": 3, "offsetY": 4, "blur": 8 },
  "blocks": [
    {
      "id": "p1",
      "type": "paragraph",
      "blockAttributes": {
        "fontSize": 64, "fontFamily": "Poppins", "color": "#5E2DC1",
        "alignment": "center", "lineHeight": 1.2, "letterSpacing": 0, "paragraphSpacing": 0
      },
      "content": [{ "text": "Grand opening", "attributes": { "strokeColor": "#FF7903", "strokeWidth": 3 } }]
    }
  ]
}

In the API reference

• TextShadow
• TextFormatting: setShadow, setStrokeWidth, setStrokeColor, setColor
• InlineAttributes: strokeColor, strokeWidth
• RichTextDocument: shadow