MyCreativeShop For Developers
Log in
Overview Pricing Demo Docs
Effects

Curved text

Try it in the demo →

Curved text sets a box's words along an arc: bent up over a headline, bent down under one, or around a circle on a round badge or seal. People edit curved text like any other text. The box lies flat while it is being edited and curves again when editing ends.

Note: Curved text is marked experimental in this version of the library: its commands and settings may change in a later version.

Bend a box's text

From your toolbar, for the selected box:

// Konva: const rt = enableRichText(stage)
rt.manager.setCurveAmount(120); // degrees of arc; turns the curve on
rt.manager.toggleCurve(); // curved or flat again

// Plain canvas: const rt = createCanvasRichText({ onChange: render })
rt.setCurveAmount(120);
rt.toggleCurve();

The amount is in degrees of arc, from -360 to 360. A positive amount bends the text up, so it sits on top of a circle; a negative amount bends it down, so it hangs from the bottom of one. 180 is a half circle. setCurveAmount also turns the curve on, and a curve turned on with toggleCurve starts at 180.

A curve belongs to the whole box, never to a selection. To change boxes you name instead of the selected box, pass them as the optional last argument: rt.manager.setCurveAmount(120, [topLine]). Each call is one undo step.

Bend a box you hold

A text box has the same settings as methods, for setting up a design in code:

topLine.setCurveEnabled(true);
topLine.setCurveAmount(120);

topLine.getCurveEnabled(); // true
topLine.getCurveAmount(); // 120

These methods are the same on a Konva RichText and a plain-canvas CanvasTextBox. They lay the box out and redraw it at once, and they are not undo steps: use the toolbar commands above for changes people should be able to undo.

How a curved box behaves

  • One line. Every letter in the box goes along the same arc. Use one box for each curved line.
  • The box fits the arc. Turning the curve on remembers the box's width, and the box is then sized to the curved text. Turning the curve off gives the box its remembered width back.
  • Handles. A curved box has only corner handles, and they scale the text. A side handle would change the width, which doesn't change a curve. A curved box inside a Konva group has no handles of its own: the group's handles scale it.
  • Editing. The box lies flat while someone types in it, with the usual cursor and selection, and curves again when editing ends.
  • Effects. A drop shadow follows the curved letters, and a gradient or image fill shows on them. See Shadows and outlines and Gradient and image fills.
  • Loading. A curved box shows nothing until its fonts have loaded, instead of a faint flat preview.

Text around a circle

To set text on a circle of an exact size, such as the ring of a round seal, give the box an arcRadius instead of an amount. The library works out the bend from the words' own width, so the letters' baselines sit on that circle. Pass the settings as documentCurve when you create the box:

// Konva
layer.add(
  new RichText({
    x: 0, y: 0, width: 300, document: createDocumentFromText("FRESH BAKED DAILY", 28),
    documentCurve: { enabled: true, amount: 180, arcRadius: 108, side: "top", centerX: 150, centerY: 150 },
  })
);

// Plain canvas
rt.addBox({
  x: 0, y: 0, width: 300, document: createDocumentFromText("SINCE 1998", 28),
  documentCurve: { enabled: true, amount: 180, arcRadius: 108, side: "bottom", centerX: 150, centerY: 150 },
});
Field What it does
enabled Whether the text is drawn curved.
amount The bend in degrees, from -360 to 360. Ignored when arcRadius is set.
arcRadius The radius of the circle the text sits on, in pixels. The bend comes from the words' width.
side With arcRadius: "top" (the default) runs along the top of the circle and bends up; "bottom" runs along the bottom, bends down and reads left to right.
centerX, centerY With arcRadius: the circle's center, in the same coordinates as the box's x and y. Give both.

With a center, the library moves the box when it is first laid out so its arc sits on that circle. After that the box can be dragged like any other. When people type more or fewer words, the box moves so the line stays on its circle, centered. With arcRadius set, getCurveAmount() returns the bend the words take on the circle.

A curve is a setting of the box, not of its document: getDocument() does not include it. On Konva it is saved with the node's attributes (node.toObject()) and can be changed with box.setAttr("documentCurve", curve). On a plain canvas, read it from box.attrs.documentCurve and pass it back to addBox when you load the design. Undo and redo include the curve.

Older text

A document records the text version it was made with (see JSON documents). Text version 2 spaces curved letters along their middles, so text bent up and text bent down have the same spacing and the box is as wide either way; a line set around a circle keeps its baselines on the circle. In text version 1 the letters are spaced along their baselines: bent up they spread apart, and bent down they crowd together. New documents use the latest version.

In the API reference

← Previous Gradient and image fills Next → Resize handles