Javascript 为什么我的输入表单画布图消失了？

在我构建的苹果计数器中，它应该如下所示：

输入一个数字

点击按钮

根据步骤1中输入的信息打印画布

但是，当我单击提交时，屏幕似乎变为空白，或者预期的输出在屏幕上闪烁，然后消失在空白屏幕上

谁能告诉我出了什么问题吗

以下是代码的相关内容：

html:

有多少苹果

计数

js:

var canvas=document.getElementById（'tutorial'）；
var ctx=canvas.getContext（'2d'）；
var draw=function（）{
//页脚
ctx.font=“16px futura”
ctx.fillText（“苹果”，10140）；
//创建并缩放苹果的形象
var appleImg=新图像（）；
appleImg.src=”http://cdn.oxwordsblog.wpfuel.co.uk/wpcms/wp-content/uploads/apple-e1382039006457.jpg";
ctx.save（）；
ctx.刻度（0.06,0.06）；
//使用输入值打印苹果
var appleIn=parseInt（document.getElementById（“apples”）.value，10）；
对于（var i=0；i
），按钮标签兼作可单击元素和提交按钮。您需要提供您想要的按钮类型：

<button type="button" onclick="draw();">Count!</button>

计数！

因此，添加type=“button”

var canvas = document.getElementById('tutorial');

var ctx = canvas.getContext('2d');


var draw=function(){

      //footer
      ctx.font="16px futura"
      ctx.fillText("Apples",10,140);


      //create and scale image of apple
      var appleImg = new Image();
      appleImg.src ="http://cdn.oxwordsblog.wpfuel.co.uk/wpcms/wp-content/uploads/apple-e1382039006457.jpg";
      ctx.save();
      ctx.scale(0.06,0.06);


      //use input value to print apples
var appleIn = parseInt(document.getElementById("apples").value,10);
              for(var i=0;i<appleIn;i++)
      {
      ctx.drawImage(appleImg,0,i*525);
      }

} 

<button type="button" onclick="draw();">Count!</button>