Displaying images on a canvas using ctx.drawImage()?
<p>I've trawled the web looking for a solution to my problem. Right now I'm trying to display an image within a canvas, yet no matter what I do, the image simply won't display. I've made sure that the path is correct and the .png file is in the right place.</p>

<p>Here is my code:</p>

<pre><code>&lt;div id="focusArea" onmousemove="updateLocation()"&gt;
  &lt;canvas id="ctx" width="1000" height="1000" style="border:1px solid #000000;"&gt;&lt;/canvas&gt;
&lt;/div&gt;

&lt;script src="https://cdn.socket.io/socket.io-1.4.5.js"&gt;&lt;/script&gt;
&lt;script&gt;
   var ctx = document.getElementById("ctx").getContext("2d");
   ctx.font = '30px Arial';

   var socket = io();

   function updateLocation() {
     socket.emit('mouse', { inputID: 'mouse', xloc: event.clientX, yloc: event.clientY, state: true});
   }

   socket.on('newPositions', function(data) {
     ctx.clearRect(0, 0, 1000, 1000);
     for (var i = 0; i &lt; data.length; i++)
     ctx.fillText(data[i].number, data[i].x, data[i].y);

     var image = new Image();
     image.onload = function () {
      ctx.drawImage(image, 0, 0);
    };
     image.src = "player.png";
   });
&lt;/script&gt;
</code></pre>

<p>Would really appreciate if someone could suggest a fix. Thanks!</p>