Text(​properties)

An object for drawing text to the screen. Supports newline characters as well as automatic new lines when setting the width property.

You can also display RTL languages by setting the attribute dir="rtl" on the main canvas element. Due to the limited browser support for individual text to have RTL settings, it must be set globally for the entire game.

let { Text } = kontra

let text = Text({
  text: 'Hello World!\nI can even be multiline!',
  font: '32px Arial',
  color: 'white',
  x: 300,
  y: 100,
  anchor: {x: 0.5, y: 0.5},
  textAlign: 'center'
});

text.render();
import { Text } from 'path/to/kontra.mjs'

let text = Text({
  text: 'Hello World!\nI can even be multiline!',
  font: '32px Arial',
  color: 'white',
  x: 300,
  y: 100,
  anchor: {x: 0.5, y: 0.5},
  textAlign: 'center'
});

text.render();
import { Text } from 'kontra';

let text = Text({
  text: 'Hello World!\nI can even be multiline!',
  font: '32px Arial',
  color: 'white',
  x: 300,
  y: 100,
  anchor: {x: 0.5, y: 0.5},
  textAlign: 'center'
});

text.render();

Extends: GameObject

Text Parameters

properties

Object. Properties of the text.

properties.text

String. The text to display.

properties.font Optional

String. The font style. Defaults to the main context font.

properties.color Optional

String. Fill color for the text. Defaults to the main context fillStyle.

properties.width Optional

Number. Set a fixed width for the text. If set, the text will automatically be split into new lines that will fit the size when possible.

properties.textAlign Optional

String. The textAlign for the context. If the dir attribute is set to rtl on the main canvas, the text will automatically be aligned to the right, but you can override that by setting this property. Defaults to 'left'.

properties.lineHeight Optional

Number. The distance between two lines of text. Defaults to 1.

Table of Contents

Text​.color

String. The color of the text.

Text​.font

String. The font style.

Text​.lineHeight

Number. The distance between two lines of text. The value is multiplied by the texts font size.

Text​.text

String. The string of text. Use newline characters to create multi-line strings.

Text​.textAlign

String. The text alignment.