如何使画布响应或清除按钮

Question

我有代码，这意味着用户将文本输入到画布中，但是它不会响应退格键，并且文本会脱离画布。我要么需要一个可以同时清除画布的按钮，要么需要代码以使画布对退格作出响应。等等。我还需要能够更改输出的字体和大小。

代码的清晰图像部分不起作用

   <canvas id="textCanvas" width="500" height="250" top style="border:1px solid #000000;position:relative;">
</canvas>
<button onclick="Clear_image();return true;">Erase Everything</button>
<input type = "text" id = "UserInput">
<script>
  var text = document.getElementById("textCanvas");
  var txt_context = text.getContext("2d");
  var UserInput = document.getElementById("UserInput");
  UserInput.oninput = function() {
    txt_context.font = "30px Arial";
    txt_context.fillText(UserInput.value, 100, 100);