Javascript 按钮生成的图像不会在第一次单击时加载

我正在尝试制作一个页面，您可以使用按钮在画布上的图像之间切换。图像（实时流数据）不会在第一次单击按钮时显示，但在单击图像或其他按钮后，最终都会显示。这些图像都非常小，我尝试过使用context.onload命令，但没有帮助

www.coosatershed.org/streamdata

下面是我如何将它们绘制进来的：

<button id="clickme" onclick="changewfk()">West Fork Millicoma</button><br /><br />


<canvas id="myCanvas" width="700" height="504"></canvas>
<script type="text/javascript">

var canvas = document.getElementById('myCanvas');
var contxt = canvas.getContext('2d');
var imageObja = new Image();

function changewfk(){
    imageObja.src = "/Gaging_Data/WFK_Gage_Screen.jpeg";
    contxt.clearRect ( 0 , 0 , canvas.width, canvas.height );
    contxt.drawImage(imageObja, 0, 0, 700, 504);
    alloff();
    mapfunct = false;

  }

West Fork Millicoma


var canvas=document.getElementById（'myCanvas'）；
var contxt=canvas.getContext（'2d'）；
var imageObja=新图像（）；
函数changewfk（）{
imageObja.src=“/Gaging_Data/WFK_Gage_Screen.jpeg”；
contxt.clearRect（0,0，canvas.width，canvas.height）；
contxt.drawImage（imageObja，0,0700504）；
alloff（）；
mapfunct=false；
}

您在哪里定义其他变量？（imageObja、contxt、canvas）在创建画布后，它们在与changewfk（）相同的脚本中定义