TextPath

new Konva.TextPath(config)

Path constructor.

Parameters

Name	Type	Description
config	Object
fontFamily (optional)	String	default is Arial
fontSize (optional)	Number	default is 12
fontStyle (optional)	String	Can be 'normal', 'italic', or 'bold', '500' or even 'italic bold'. 'normal' is the default.
fontVariant (optional)	String	can be normal or small-caps. Default is normal
textBaseline (optional)	String	Can be 'top', 'bottom', 'middle', 'alphabetic', 'hanging'. Default is middle
text	String
data	String	SVG data string
kerningFunc	function	a getter for kerning values for the specified characters
fill (optional)	String	fill color
fillPatternImage (optional)	Image	fill pattern image
fillPatternX (optional)	Number
fillPatternY (optional)	Number
fillPatternOffset (optional)	Object	object with x and y component
fillPatternOffsetX (optional)	Number
fillPatternOffsetY (optional)	Number
fillPatternScale (optional)	Object	object with x and y component
fillPatternScaleX (optional)	Number
fillPatternScaleY (optional)	Number
fillPatternRotation (optional)	Number
fillPatternRepeat (optional)	String	can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat"
fillLinearGradientStartPoint (optional)	Object	object with x and y component
fillLinearGradientStartPointX (optional)	Number
fillLinearGradientStartPointY (optional)	Number
fillLinearGradientEndPoint (optional)	Object	object with x and y component
fillLinearGradientEndPointX (optional)	Number
fillLinearGradientEndPointY (optional)	Number
fillLinearGradientColorStops (optional)	Array	array of color stops
fillRadialGradientStartPoint (optional)	Object	object with x and y component
fillRadialGradientStartPointX (optional)	Number
fillRadialGradientStartPointY (optional)	Number
fillRadialGradientEndPoint (optional)	Object	object with x and y component
fillRadialGradientEndPointX (optional)	Number
fillRadialGradientEndPointY (optional)	Number
fillRadialGradientStartRadius (optional)	Number
fillRadialGradientEndRadius (optional)	Number
fillRadialGradientColorStops (optional)	Array	array of color stops
fillEnabled (optional)	Boolean	flag which enables or disables the fill. The default value is true
fillPriority (optional)	String	can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration
stroke (optional)	String	stroke color
strokeWidth (optional)	Number	stroke width
fillAfterStrokeEnabled (optional)	Boolean	Should we draw fill AFTER stroke? Default is false.
hitStrokeWidth (optional)	Number	size of the stroke on hit canvas. The default is "auto" - equals to strokeWidth
strokeHitEnabled (optional)	Boolean	flag which enables or disables stroke hit region. The default is true
perfectDrawEnabled (optional)	Boolean	flag which enables or disables using buffer canvas. The default is true
shadowForStrokeEnabled (optional)	Boolean	flag which enables or disables shadow for stroke. The default is true
strokeScaleEnabled (optional)	Boolean	flag which enables or disables stroke scale. The default is true
strokeEnabled (optional)	Boolean	flag which enables or disables the stroke. The default value is true
lineJoin (optional)	String	can be miter, round, or bevel. The default is miter
lineCap (optional)	String	can be butt, round, or square. The default is butt
shadowColor (optional)	String
shadowBlur (optional)	Number
shadowOffset (optional)	Object	object with x and y component
shadowOffsetX (optional)	Number
shadowOffsetY (optional)	Number
shadowOpacity (optional)	Number	shadow opacity. Can be any real number between 0 and 1
shadowEnabled (optional)	Boolean	flag which enables or disables the shadow. The default value is true
dash (optional)	Array
dashEnabled (optional)	Boolean	flag which enables or disables the dashArray. The default value is true
x (optional)	Number
y (optional)	Number
width (optional)	Number
height (optional)	Number
visible (optional)	Boolean
listening (optional)	Boolean	whether or not the node is listening for events
id (optional)	String	unique id
name (optional)	String	non-unique name
opacity (optional)	Number	determines node opacity. Can be any number between 0 and 1
scale (optional)	Object	set scale
scaleX (optional)	Number	set scale x
scaleY (optional)	Number	set scale y
rotation (optional)	Number	rotation in degrees
offset (optional)	Object	offset from center point and rotation point
offsetX (optional)	Number	set offset x
offsetY (optional)	Number	set offset y
draggable (optional)	Boolean	makes the node draggable. When stages are draggable, you can drag and drop the entire stage by dragging any portion of the stage
dragDistance (optional)	Number
dragBoundFunc (optional)	function

Inherited from: Konva.Shape

Own Methods

getTextWidth()

get text width in pixels

data(data)

get/set SVG path data string. This method also automatically parses the data string into a data array. Currently supported SVG data: M, m, L, l, H, h, V, v, Q, q, T, t, C, c, S, s, A, a, Z, z

Parameters:

• data (String): svg path string

Returns: String

Example:

// get data
var data = shape.data();

// set data
shape.data('M200,100h100v50z');

fontFamily(fontFamily)

get/set font family

Parameters:

• fontFamily (String)

Returns: String

Example:

// get font family
var fontFamily = shape.fontFamily();

// set font family
shape.fontFamily('Arial');

fontSize(fontSize)

get/set font size in pixels

Parameters:

• fontSize (Number)

Returns: Number

Example:

// get font size
var fontSize = shape.fontSize();

// set font size to 22px
shape.fontSize(22);

fontStyle(fontStyle)

get/set font style. Can be 'normal', 'italic', or 'bold', '500' or even 'italic bold'. 'normal' is the default.

Parameters:

• fontStyle (String)

Returns: String

Example:

// get font style
var fontStyle = shape.fontStyle();

// set font style
shape.fontStyle('bold');

align(align)

get/set horizontal align of text. Can be 'left', 'center', 'right' or 'justify'

Parameters:

• align (String)

Returns: String

Example:

// get text align
var align = text.align();

// center text
text.align('center');

// align text to right
text.align('right');

letterSpacing(letterSpacing)

get/set letter spacing. The default is 0.

Parameters:

• letterSpacing (Number)

Returns: Number

Example:

// get letter spacing value
var letterSpacing = shape.letterSpacing();

// set the letter spacing value
shape.letterSpacing(2);

textBaseline(textBaseline)

get/set text baseline. The default is 'middle'. Can be 'top', 'bottom', 'middle', 'alphabetic', 'hanging'

Parameters:

• textBaseline (String)

Returns: String

Example:

// get current text baseline
var textBaseline = shape.textBaseline();

// set new text baseline
shape.textBaseline('top');

fontVariant(fontVariant)

get/set font variant. Can be 'normal' or 'small-caps'. 'normal' is the default.

Parameters:

• fontVariant (String)

Returns: String

Example:

// get font variant
var fontVariant = shape.fontVariant();

// set font variant
shape.fontVariant('small-caps');

getText(text)

get/set text

Parameters:

• text (String)

Returns: String

Example:

// get text
var text = text.text();

// set text
text.text('Hello world!');

textDecoration(textDecoration)

get/set text decoration of a text. Can be '', 'underline', 'line-through', or a combination like 'underline line-through'.

Parameters:

• textDecoration (String)

Returns: String

Example:

// get text decoration
var textDecoration = shape.textDecoration();

// underline text
shape.textDecoration('underline');

// line-through text
shape.textDecoration('line-through');

// combine both
shape.textDecoration('underline line-through');

kerningFunc(kerningFunc)

get/set kerning function.

Parameters:

• kerningFunc (String)

Returns: String

Example:

// get text decoration
var kerningFunc = text.kerningFunc();

// center text
text.kerningFunc(function(leftChar, rightChar) {
  return 1;
});

direction(direction)

get/set text direction. Can be 'inherit', 'ltr' or 'rtl'. Default is 'inherit'. Setting 'rtl' reverses the per-glyph layout order along the path, so Hebrew/Arabic strings read correctly when scanned right-to-left. This is a pragmatic fix limited by canvas TextPath rendering: each glyph is still drawn independently, so Arabic cursive joining and full Unicode bidi reordering of mixed-direction text are not supported. For best results, pair direction: 'rtl' with align: 'right' so the text starts at the end of the path.

Parameters:

• direction (String)

Returns: String

Example:

// get direction
var direction = textpath.direction();

// set direction
textpath.direction('rtl');

Inherited Methods

Konva.TextPath also has all methods of its parent classes. Each link below opens the full documentation of the method on the class that defines it.

From Konva.Shape

• getContext()
• getCanvas()
• hasShadow()
• hasFill()
• hasStroke()
• intersects(point)
• getSelfRect()
• drawHitFromCache(alphaThreshold)
• stroke(color)
• strokeWidth(strokeWidth)
• fillAfterStrokeEnabled(fillAfterStrokeEnabled)
• hitStrokeWidth(hitStrokeWidth)
• strokeHitEnabled(strokeHitEnabled)
• perfectDrawEnabled(perfectDrawEnabled)
• shadowForStrokeEnabled(shadowForStrokeEnabled)
• lineJoin(lineJoin)
• lineCap(lineCap)
• miterLimit(miterLimit)
• sceneFunc(drawFunc)
• hitFunc(drawFunc)
• dash(dash)
• shadowColor(color)
• shadowBlur(blur)
• shadowOpacity(opacity)
• shadowOffset(offset)
• shadowOffsetX(x)
• shadowOffsetY(y)
• fillPatternImage(image)
• fill(color)
• fillPatternX(x)
• fillPatternY(y)
• fillLinearGradientColorStops(colorStops)
• strokeLinearGradientColorStops(colorStops)
• fillRadialGradientStartRadius(radius)
• fillRadialGradientEndRadius(radius)
• fillRadialGradientColorStops(colorStops)
• fillPatternRepeat(repeat)
• fillEnabled(enabled)
• strokeEnabled(enabled)
• shadowEnabled(enabled)
• dashEnabled(enabled)
• strokeScaleEnabled(enabled)
• fillPriority(priority)
• fillPatternOffset(offset)
• fillPatternOffsetX(x)
• fillPatternOffsetY(y)
• fillPatternScale(scale)
• fillPatternScaleX(x)
• fillPatternScaleY(y)
• fillLinearGradientStartPoint(startPoint)
• strokeLinearGradientStartPoint(startPoint)
• fillLinearGradientStartPointX(x)
• linearLinearGradientStartPointX(x)
• fillLinearGradientStartPointY(y)
• strokeLinearGradientStartPointY(y)
• fillLinearGradientEndPoint(endPoint)
• strokeLinearGradientEndPoint(endPoint)
• fillLinearGradientEndPointX(x)
• strokeLinearGradientEndPointX(x)
• fillLinearGradientEndPointY(y)
• strokeLinearGradientEndPointY(y)
• fillRadialGradientStartPoint(startPoint)
• fillRadialGradientStartPointX(x)
• fillRadialGradientStartPointY(y)
• fillRadialGradientEndPoint(endPoint)
• fillRadialGradientEndPointX(x)
• fillRadialGradientEndPointY(y)
• fillPatternRotation(rotation)
• fillRule(rotation)

From Konva.Node

• clearCache()
• cache(config)
• isCached()
• getClientRect(config)
• on(evtStr, handler)
• off(evtStr)
• remove()
• destroy()
• getAttr(attr)
• getAncestors()
• getAttrs()
• setAttrs(config)
• isListening()
• isVisible()
• show()
• hide()
• getAbsoluteZIndex()
• getDepth()
• getRelativePointerPosition()
• getAbsolutePosition(top)
• move(change)
• rotate(theta)
• moveToTop()
• moveUp()
• moveDown()
• moveToBottom()
• getAbsoluteOpacity()
• moveTo(newContainer)
• toObject()
• toJSON()
• getParent()
• findAncestors(selector, includeSelf, stopNode)
• findAncestor(selector, includeSelf, stopNode)
• getLayer()
• getStage()
• fire(eventType, evt, bubble)
• getAbsoluteTransform()
• getAbsoluteScale()
• getAbsoluteRotation()
• getTransform()
• clone(obj)
• toCanvas(config)
• toDataURL(config)
• toImage(config)
• toBlob(config)
• getClassName()
• getType()
• addName(name)
• hasName(name)
• removeName(name)
• setAttr(attr, val)
• draw()
• startDrag()
• stopDrag()
• isDragging()
• isClientRectOnScreen(margin)
• zIndex(index)
• absolutePosition(pos)
• position(pos)
• x(x)
• y(y)
• globalCompositeOperation(type)
• opacity(opacity)
• name(name)
• id(id)
• rotation(rotation)
• scale(scale)
• scaleX(x)
• scaleY(y)
• skew(skew)
• skewX(x)
• skewY(y)
• offsetX(x)
• offsetY(y)
• dragDistance(distance)
• width(width)
• height(height)
• listening(listening)
• preventDefault(preventDefault)
• filters(filters)
• visible(visible)
• transformsEnabled(enabled)
• size(size)
• dragBoundFunc(dragBoundFunc)
• draggable(draggable)
• to(params)
• blurRadius(radius)
• brightness(brightness)
• contrast(contrast)
• embossStrength(level)
• embossWhiteLevel(embossWhiteLevel)
• embossDirection(embossDirection)
• embossBlend(embossBlend)
• enhance(amount)
• hue(hue)
• saturation(saturation)
• luminance(value)
• value(value)
• kaleidoscopePower(power)
• kaleidoscopeAngle(degrees)
• noise(noise)
• pixelSize(pixelSize)
• levels(level)
• red(red)
• green(green)
• blue(blue)
• alpha(alpha)
• threshold(threshold)