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

Question

我正在尝试创建一个页面，您可以使用按钮在画布上的图像之间切换。图像（实时流数据）不会出现在第一次点击按钮上，但在点击它们或其他按钮后，最终都会出现。图像都非常小，我尝试使用context.onload命令，但这有助于帮助。

www.cooswatershed.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;

  }