检查这个javascript制作模因

Question

下面是我制作的html代码。实际上，问题是当我调用函数get（）onclick时，我的浏览器中没有出现任何变化。但是，在提交按钮上单击多次时，显示我想要的外观的即时更改，但持续时间非常短（比如0.1秒）。

var t = "top Text here";
var b = "bottom Text";
var i = "https://images.pexels.com/photos/1385326/pexels-photo-1385326.jpeg";
console.log(t, b, i);
memeCanvas();


function get() {
  t = document.getElementById("topText").value;
  b = document.getElementById("botText").value;
  i = document.getElementById("imgLink").value;
  console.log(t, b, i);
  memeCanvas();
}

function memeCanvas() {
  var c = document.querySelector("#c");
  var ctx = c.getContext("2d");
  var image = new Image();

  image.onload = function() {
    console.log("Image Loaded");

    ctx.drawImage(image, 0, 0, 400, 400);

    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, 400, 50);
    ctx.fillRect(0, 350, 400, 50);
    ctx.strokeText(t, 10, 10);

    ctx.strokeStyle = "Black";
    ctx.strokeRect(0, 0, 400, 50);
    ctx.strokeRect(0, 350, 400, 50);
    ctx.strokeText(b, 0, 370);
  }
  image.src = i;
}

canvas {}

<body>

  <canvas id="c" width="400" height="400"></canvas>
  <form>
    <input type="text" id="topText" value="hahaha">
    <input type="text" id="botText" value="nooo">
    <input type="text" id="imgLink" value="chicken.jpg">
    <!--*here chick.jpeg is an image stored in my computer */-->
    <input type="submit" onclick="get()">
  </form>
</body>