HTML5 canvas Text Tutorial

To create text with Konva, we can instantiate a Konva.Text() object.

For a full list of attributes and methods, check out the Konva.Text documentation.

Konva Text Demoview raw
<!DOCTYPE html>
<script src=""></script>
<meta charset="utf-8">
<title>Konva Text Demo</title>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;
<div id="container"></div>
var stage = new Konva.Stage({
container: 'container',
width: 340,
height: 300
var layer = new Konva.Layer();
var simpleText = new Konva.Text({
x: stage.getWidth() / 2,
y: 15,
text: 'Simple Text',
fontSize: 30,
fontFamily: 'Calibri',
fill: 'green'
// to align text in the middle of the screen, we can set the
// shape offset to the center of the text shape after instantiating it
x: simpleText.getWidth() / 2
// since this text is inside of a defined area, we can center it using
// align: 'center'
var complexText = new Konva.Text({
x: 20,
y: 60,
text: 'COMPLEX TEXT\n\nAll the world\'s a stage, and all the men and women merely players. They have their exits and their entrances.',
fontSize: 18,
fontFamily: 'Calibri',
fill: '#555',
width: 300,
padding: 20,
align: 'center'
var rect = new Konva.Rect({
x: 20,
y: 60,
stroke: '#555',
strokeWidth: 5,
fill: '#ddd',
width: 300,
height: complexText.getHeight(),
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [10, 10],
shadowOpacity: 0.2,
cornerRadius: 10
// add the shapes to the layer
// add the layer to the stage