Text editing in HTML5 canvas with Konva

User can’t directly edit Konva.Text content. In fact canvas API is not designed for such purpose.
It is possible to emulate text editing on canvas (by drawing blinking cursor, emulate selection, etc).
Konva has not support for such case. We recommend to edit the user input outside of your canvas.
It may be textarea somewhere in your page.

Instructions: Double click on text to edit it. Type something. Press Enter.

Konva 20000 Nodes Demoview raw
<!DOCTYPE html>
<html>

<head>
<script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"></script>
<meta charset="utf-8">
<title>Konva Editable Text on html5 canvas Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;
}
</style>
</head>

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

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

var layer = new Konva.Layer();
stage.add(layer);

var textNode = new Konva.Text({
text: 'Some text here',
x: 50,
y: 50,
fontSize: 20,
});

layer.add(textNode);
layer.draw();

textNode.on('dblclick', () => {
// create textarea over canvas with absolute position

// first we need to find its positon
var textPosition = textNode.getAbsolutePosition();
var stageBox = stage.getContainer().getBoundingClientRect();

var areaPosition = {
x: textPosition.x + stageBox.left,
y: textPosition.y + stageBox.top
};


// create textarea and style it
var textarea = document.createElement('textarea');
document.body.appendChild(textarea);

textarea.value = textNode.text();
textarea.style.position = 'absolute';
textarea.style.top = areaPosition.y + 'px';
textarea.style.left = areaPosition.x + 'px';
textarea.style.width = textNode.width();

textarea.focus();


textarea.addEventListener('keydown', function (e) {
// hide on enter
if (e.keyCode === 13) {
textNode.text(textarea.value);
layer.draw();
document.body.removeChild(textarea);
}
});
})
</script>

</body>

</html>