HTML5 canvas Text Tutorial

Get last news, demos, posts from Konva

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.

If you want to enable full rich text rendering features see Rich Text Demo.

Konva Text Demoview raw
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Text Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var stage = new Konva.Stage({
container: 'container',
width: 340,
height: 300
});

var layer = new Konva.Layer();

var simpleText = new Konva.Text({
x: stage.width() / 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
simpleText.offsetX(simpleText.width() / 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.height(),
shadowColor: 'black',
shadowBlur: 10,
shadowOffsetX: 10,
shadowOffsetY: 10,
shadowOpacity: 0.2,
cornerRadius: 10
});

// add the shapes to the layer
layer.add(simpleText);
layer.add(rect);
layer.add(complexText);

// add the layer to the stage
stage.add(layer);
</script>
</body>
</html>