Gradient and image fills

A fill paints a text box's letters with a two-color gradient or with an image, such as a photo or a texture, instead of their own colors. The text stays editable, and the fill stays in place as people type.

Fill with a gradient

// Konva: const rt = enableRichText(stage)
rt.manager.setFill({ type: "gradient", color1: "#5E2DC1", color2: "#FF7903", angle: 90 });

// Plain canvas: const rt = createCanvasRichText({ onChange: render })
rt.setFill({ type: "gradient", color1: "#5E2DC1", color2: "#FF7903", angle: 90 });

The gradient runs across the whole box, not across each letter, so the letters together show one gradient.

Fill with an image

rt.manager.setFill({ type: "image", url: "https://images.example.com/beach.jpg", fit: "cover" });

The image is placed against the whole box. Until the image has loaded, the letters show their own colors, then the box redraws with the image. On Konva, cloneStageForExport waits for fill images before it draws, so an export shows them.

Note: The library loads the image as a cross-origin request. An image on another domain must be served with an Access-Control-Allow-Origin header that allows your page. Without one the image does not load, and the letters keep their own colors. The library tries each failed address once per page load.

Remove a fill

rt.manager.setFill(null); // the letters' own colors again
rt.manager.setColor("#1B1130"); // a solid color also removes the fill

The letters' own colors are kept under a fill, so removing the fill shows them again. Setting a color with setColor removes the fill from the whole box, even when only some words are selected.

What a fill covers

A fill belongs to the whole box, not to a selection: setFill changes the box while some words are selected too. To change boxes you name instead of the selected box, pass them as the optional last argument: rt.manager.setFill(fill, [headline]). Each call is one undo step.

Under a fill:

• Every letter is painted with the fill, including bold, italic and outlined letters. The outline keeps its own color.
• Underlines, strikethroughs and tab leaders are painted with the fill.
• Character list markers (a bullet, a number, a symbol) are painted with the fill. A vector marker keeps its own colors.
• A drop shadow is cast by the filled letters, as it is by plain letters.
• Curved text shows the fill, a gradient or an image.

A fill changes only how the text is drawn, never where lines break.

Older text

A document records the text version it was made with (see JSON documents). In text version 1, curved text under an image fill is drawn in the letters' own colors, and underlines and strikethroughs keep the run's color under any fill. New documents use the latest version.

In the document

The fill is saved as the document's fill, so it is saved, copied and undone with the text. A document you build yourself can carry one before it is loaded:

const doc = createDocumentFromText("Summer sale", 72);
doc.fill = { type: "gradient", color1: "#5E2DC1", color2: "#FF7903", angle: 90 };
box.setDocument(doc);

In the API reference

• TextFill, GradientFill and ImageFill
• TextFormatting: setFill, setColor
• RichTextDocument: fill