Text

new Konva.Text(config)

Text constructor

Parameters

Name	Type	Description
config	Object
direction (optional)	String	default is inherit
fontFamily (optional)	String	default is Arial
fontSize (optional)	Number	in pixels. 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
textDecoration (optional)	String	can be line-through, underline or empty string. Default is empty string.
underlineOffset (optional)	String	offset for underline line. Default is calculated based on font size.
text	String
align (optional)	String	can be left, center, right or justify
verticalAlign (optional)	String	can be top, middle or bottom
padding (optional)	Number
lineHeight (optional)	Number	default is 1
wrap (optional)	String	can be "word", "char", or "none". Default is word
ellipsis (optional)	Boolean	can be true or false. Default is false. if Konva.Text config is set to wrap="none" and ellipsis=true, then it will add "..." to the end
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 pure text width without padding

Returns: Number

measureSize(text)

measure string with the font of current text shape. That method can't handle multiline text.

Parameters:

• text (String): text to measure

Returns: Object { width , height } of measured text

_shouldHandleEllipsis(currentHeightPx)

whether to handle ellipsis, there are two cases: 1. the current line is the last line 2. wrap is NONE

Parameters:

• currentHeightPx (Number)

Returns: Boolean

width(width)

get/set width of text area, which includes padding.

Parameters:

• width (Number)

Returns: Number

Example:

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

// set width
text.width(20);

// set to auto
text.width('auto');
text.width() // will return calculated width, and not "auto"

height(height)

get/set the height of the text area, which takes into account multi-line text, line heights, and padding.

Parameters:

• height (Number)

Returns: Number

Example:

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

// set height
text.height(20);

// set to auto
text.height('auto');
text.height() // will return calculated height, and not "auto"

direction(direction)

get/set direction

Parameters:

• direction (String)

Returns: String

Example:

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

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

fontFamily(fontFamily)

get/set font family

Parameters:

• fontFamily (String)

Returns: String

Example:

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

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

fontSize(fontSize)

get/set font size in pixels

Parameters:

• fontSize (Number)

Returns: Number

Example:

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

// set font size to 22px
text.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 = text.fontStyle();

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

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 = text.fontVariant();

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

padding(padding)

get/set padding

Parameters:

• padding (Number)

Returns: Number

Example:

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

// set padding to 10 pixels
text.padding(10);

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');

// justify text

verticalAlign(verticalAlign)

get/set vertical align of text. Can be 'top', 'middle', 'bottom'.

Parameters:

• verticalAlign (String)

Returns: String

Example:

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

// center text
text.verticalAlign('middle');

lineHeight(lineHeight)

get/set line height. The default is 1.

Parameters:

• lineHeight (Number)

Returns: Number

Example:

// get line height
var lineHeight = text.lineHeight();

// set the line height
text.lineHeight(2);

wrap(wrap)

get/set wrap. Can be "word", "char", or "none". Default is "word". In "word" wrapping any word still can be wrapped if it can't be placed in the required width without breaks.

Parameters:

• wrap (String)

Returns: String

Example:

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

// set wrap
text.wrap('word');

ellipsis(ellipsis)

get/set ellipsis. Can be true or false. Default is false. If ellipses is true, Konva will add "..." at the end of the text if it doesn't have enough space to write characters. That is possible only when you limit both width and height of the text

Parameters:

• ellipsis (Boolean)

Returns: Boolean

Example:

// get ellipsis param, returns true or false
var ellipsis = text.ellipsis();

// set ellipsis
text.ellipsis(true);

letterSpacing(letterSpacing)

set letter spacing property. Default value is 0.

Parameters:

• letterSpacing (Number)

text(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. Possible values are 'underline', 'line-through' or combination of these values separated by space

Parameters:

• textDecoration (String)

Returns: String

Example:

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

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

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

// underline and strike text
text.textDecoration('underline line-through');

underlineOffset(underlineOffset)

get/set text underline decoration offset. Offset for underline line. Default is calculated based on font size.

Parameters:

• underlineOffset (Number)

Returns: Number

Example:

// get underline offset
var underlineOffset = text.underlineOffset();

// set underline offset
text.underlineOffset(5);

charRenderFunc(charRenderFunc)

get/set per-character render hook. The callback is invoked for each grapheme before drawing. It can mutate the provided context (e.g. translate, rotate, change styles) and should return void. Note: per-character rendering may disable native kerning/ligatures.

Parameters:

• charRenderFunc (function)

Returns: function

Example:

// apply small x-translation and a custom color to every second character
text.charRenderFunc(function(props) {
  if (props.index % 2 === 1) {
    props.context.translate(2, 0);
    props.context.fillStyle = 'red';
  }
});

Inherited Methods

Konva.Text 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)
• 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)