title: Canvas background image not showing on opening webpage
body: <p>I am creating a canvas to display captcha in it using javascript. The problem is I want to add a background to it but the background does not load on opening the page. However, when I hit the refresh button it works fine. Here's the code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script&gt;
      var code = {};
      function canvas(){
  
           var canvas = document.getElementById('canvas');
             var ctx = canvas.getContext('2d');
             ctx.clearRect(0, 0, canvas.width, canvas.height);
              var background = new Image();
              background.src = "http://gazell.io/wp-content/uploads/2016/10/image011.png";
              ctx.drawImage(background, 0 ,0);
          var list = new Array('@','%','#','$','*','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','0','1','2','3','4','5','6','7','8','9');                   
          var i;
          for (i=0;i&lt;6;i++){
            var a = list[Math.floor(Math.random() * list.length)];
            var b = list[Math.floor(Math.random() * list.length)];
            var c = list[Math.floor(Math.random() * list.length)];
            var d = list[Math.floor(Math.random() * list.length)];
            var e = list[Math.floor(Math.random() * list.length)];
            var f = list[Math.floor(Math.random() * list.length)];
            var g = list[Math.floor(Math.random() * list.length)];
           }
         code.value = a  + b + c +  d + e + f + g;
  
         ctx.font = "italic 42px verdana";
         ctx.fillStyle="#FF9912";
         ctx.textAlign = "center";
         ctx.fillText(code.value, canvas.width/2,canvas.height/2);
      }
  
      window.onload = canvas();
  
      function ValidCaptcha(){
         //var string1 = document.getElementById('canvas').value;
         var string1 = document.getElementById('text').value;
         var string2 = code.value;
         if(string1 != null){
             if(string1 == string2){
             alert("true");
         }else{
             alert("false");
          }
         }  
      }     
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I want the code to display the canvas background when the page is loaded not when I hit the refresh button</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;body onload="canvas();"&gt;
    &lt;div class="box"&gt;
      &lt;h1&gt;Testing Captcha&lt;/h1&gt;
      &lt;canvas id="canvas" height="80" width="260"&gt;&lt;/canvas&gt;
      &lt;input id="text" type="text"&gt;&lt;/input&gt;
      &lt;button id="btn" onclick="canvas();"&gt;Refresh&lt;/button&gt;
      &lt;button type="button" value="Check" onclick="ValidCaptcha();"&gt;Submit&lt;/button&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>