Вот простой шаблон.Вы можете узнать больше о тексте на холсте здесь: https://www.w3schools.com/graphics/canvas_text.asp
/* Very basic canvas setup */
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
/* Function what is called on every input change */
var UserInput = document.getElementById("UserInput");
UserInput.oninput = function() {
// Sending to console text which is now in input
//console.log(UserInput.value);
/* Drawing text taken from input on 100, 100 */
ctx.font = "30px Arial";
ctx.fillText(UserInput.value, 100, 100);
};
<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="500" height="250" style="border:1px solid #000000;">
</canvas>
<input type = "text" id = "UserInput">
</body>
</html>