Text Component


when the text is changed

By default, text will have the style "10px sans-serif".

Note: An entity with the text component is just text! If you want to write text inside an image, you need one entity for the text and another entity for the image. More tips for writing text inside an image: (1) Use the z-index (from 2D component) to ensure that the text is on top of the image, not the other way around; (2) use .attach() (from 2D component) to glue the text to the image so they move and rotate together.

Note: For DOM (but not canvas) text entities, various font settings (such as text-decoration) can be set using .css() (see DOM component). If you use .css() to set the individual properties which are controlled by .textFont(), .textColor(), or .textAlign(), the text component will set these properties internally as well. However, if you use .css() to set shorthand properties such as font, these will be ignored by the text component.

Note: If you use canvas text with glyphs that are taller than standard letters, portions of the glyphs might be cut off.


Back to top


public this .dynamicTextGeneration(bool dynamicTextOn[, string textUpdateEvent])

A flag that indicates whether dyanamic text should be on or off.


The name of the event which will trigger text to be updated. Defaults to "UpdateFrame". (This parameter does nothing if dynamicTextOn is false.)

Turns on (or off) dynamic text generation for this entity. While dynamic text generation is on, if the .text() method is called with a text generating function, the text will be updated each frame.

If textUpdateEvent is provided, text generation will be bound to that event instead of "UpdateFrame".

The text generating function is invoked with the event object parameter, which the event was triggered with.

Note: Dynamic text generation could cause performance issues when the entity is attached to a Canvas layer.


Crafty.e("2D, DOM, Text, Motion").attr({ x: 100, y: 100, vx: 10 })
    .text(function () { return "My position is " + this._x })

The above example will update the text with the entities position as it changes.

Back to top


public this .text(String text)

String of text that will be inserted into the DOM or Canvas element.

public this .text(Function textGenerator[, Any eventData])

A function that returns a string. It will be immediately invoked with the optional eventData in the context of the entity, with the result used as the text to display.


Optional parameter to invoke the function with.

This method will update the text inside the entity.

If you need to reference attributes on the entity itself you can pass a function instead of a string.

If dynamic text generation is turned on, the function will then be reevaluated as necessary.


Crafty.e("2D, DOM, Text").attr({ x: 100, y: 100 }).text("Look at me!!");

Crafty.e("2D, DOM, Text").attr({ x: 100, y: 100 })
    .text(function () { return "My position is " + this._x });

Crafty.e("2D, Canvas, Text").attr({ x: 100, y: 100 }).text("Look at me!!");

Crafty.e("2D, Canvas, Text").attr({ x: 100, y: 100 })
    .text(function () { return "My position is " + this._x });
Back to top


public this .textAlign(String alignment)

The new alignment of the text.

Change the alignment of the text. Valid values are 'start', 'end, 'left', 'center', or 'right'.

Back to top


public this .textColor(String color)

The color in name, hex, rgb or rgba

Change the color of the text. You can use HEX, rgb and rgba colors.

If you want the text to be transparent, you should use rgba where you can define alphaChannel.


Crafty.e("2D, DOM, Text").attr({ x: 100, y: 100 }).text("Look at me!!")

Crafty.e("2D, Canvas, Text").attr({ x: 100, y: 100 }).text('Look at me!!')
  .textColor('rgba(0, 255, 0, 0.5)');

Crafty.e("2D, Canvas, Text").attr({ x: 100, y: 100 }).text('Look at me!!')
Back to top



public this .textFont(String key, * value)

Property of the entity to modify


Value to set the property to

public this .textFont(Object map)

Object where the key is the property to modify and the value as the property value

Use this method to set font property of the text entity. Possible values are: type, weight, size, family, lineHeight, and variant.

When rendered by the canvas, lineHeight and variant will be ignored.


Crafty.e("2D, DOM, Text").textFont({ type: 'italic', family: 'Arial' });
Crafty.e("2D, Canvas, Text").textFont({ size: '20px', weight: 'bold' });

Crafty.e("2D, Canvas, Text").textFont("type", "italic");
Crafty.e("2D, Canvas, Text").textFont("type"); // italic
Back to top



public this .unselectable()

This method sets the text so that it cannot be selected (highlighted) by dragging. (Canvas text can never be highlighted, so this only matters for DOM text.) Works by changing the css property "user-select" and its variants.

Likewise, this sets the mouseover cursor to be "default" (arrow), not "text" (I-beam)


Crafty.e("2D, DOM, Text").text('This text cannot be highlighted!').unselectable();