HTML 5 - 使用onclick事件在画布图片上绘制图片

Question

目前我的画布有问题，我希望你们能帮助我。

我的画布获得＆＃34; onload＆＃34;充满了足球场的照片。我现在想要在点击按钮＆＃34;开始编队＆＃34;之后显示开始编队中的每个玩家，延迟2秒。

但我的代码不起作用，我不知道我的错误在哪里，希望你们可以帮助我。

代码 - HTML / JS：

<article id='canvas_field'>
    <section id='canvas_control'>
    <button id='field_button' type='button' onclick='field()'>Start    
    Formation</button>
    </section>

    <section id='canvas'>

<canvas id="myCanvas" width="800" height="500"></canvas>


<script>

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  var imageObj = new Image();
  var imageObj1 = new Image();
  var imageObj2 = new Image();
  var imageObj3 = new Image();

  imageObj.src  = 'img/canvas.png';
  imageObj1.src = 'img/Stegen-ConvertImage.jpg';
  imageObj2.src = 'img/Alba-ConvertImage.jpg';
  imageObj3.src = 'img/Pique-ConvertImage.jpg';

  imageObj.onload = function() {
    context.drawImage(imageObj, 15, 0);
  };



  function field() {



 imageObj.onload = function() {
    context.drawImage(imageObj1, 40, 240);;
  };
  setTimeout(field, 2000); // Add new player every 2 seconds

  imageObj.onload = function() {
    context.drawImage(imageObj2, 120, 100);
  };
  setTimeout(field, 2000); // Add new player every 2 seconds


  imageObj.onload = function() {
    context.drawImage(imageObj3, 120, 200);
  };
  setTimeout(field, 2000); // Add new player every 2 seconds



}
  </script>
</section>
</article>

这里是按钮的CSS：

button{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    width:calc((100% - 10px)/3);
    height: 25px;
    border:2px solid rgba(255,255,255,0.9);
    border-radius: 10px;
}