使用HTML输入在画布上键入？

我有一些带有

context.fillText（“这里的文本”，0，0）的JS

允许我在加载到画布的图像上放置一些文本

是否可以使用输入字段键入并允许在

上下文的文本中进行此填充。fillText

<form>
Text here: <input type="text" name="texthere">
</form>

正文如下：

，在文本字段上放置一个观察者，然后用输入的新文本重新绘制画布：

var canvas = document.getElementsByTagName('canvas')[0],
    ctx = null,
    body = document.getElementsByTagName('body')[0], th;

th = document.querySelector('#texthere');
th.onkeyup = function() {
    if (ctx) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillText(th.value, 20, 20);
    }
}

if (canvas.getContext('2d')) {
  ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, 600, 600);
}