How to resize text on canvas?

How to change width of the text with transforming tool?

Remember, that Konva.Transformer is changing scaleX and scaleY properties of a node.
If you want to change width of the text, without changing its size, you should reset scale of a text back to 1 and adjust width accordantly.

You can use transform event to update text’s properties as you need it.

Instructions: Try to resize a text.

Konva Text resize Demoview raw
<!DOCTYPE html>
<script src="[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Resize Text Demo</title>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;

<div id="container"></div>
var width = window.innerWidth;
var height = window.innerHeight;

var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,

var layer = new Konva.Layer();

var text = new Konva.Text({
x: 50,
y: 60,
fontSize: 20,
text: 'Hello from the Konva framework. Try to resize me.',
draggable: true,

var MIN_WIDTH = 20;
var tr = new Konva.Transformer({
nodes: [text],
padding: 5,
// enable only side anchors
enabledAnchors: ['middle-left', 'middle-right'],
// limit transformer size
boundBoxFunc: (oldBox, newBox) => {
if (newBox.width < MIN_WIDTH) {
return oldBox;
return newBox;

text.on('transform', () => {
// with enabled anchors we can only change scaleX
// so we don't need to reset height
// just width
width: Math.max(text.width() * text.scaleX(), MIN_WIDTH),
scaleX: 1,
scaleY: 1,