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.

properties.strokeColor Optional

String. Stroke color for the text.

properties.lineWidth Optional

number. Stroke line width for the text.