Using images

  • Revision slug: Talk:Canvas_tutorial/Using_images
  • Revision title: Using images
  • Revision id: 121166
  • Created:
  • Creator: Ger
  • Is current revision? No
  • Comment why img.onload should precede img.src

Revision Content

If you use an onload event handler, it should be added before setting img.src:

var img = new Image();   // Create new Image object
img.onload = function(){
  // execute drawImage statements here
}
img.src = 'myImage.png'; // Set source path

If img.onload was after img.src, then img might be loaded by the time execution gets to the img.onload=... line. In that case, the onload handler is never executed. This is not just a fictional coding style rant - it prevents execution on Opera 9, and it might also be an issue on future Mozilla browsers.

If you agree, this order change could be spread to the sample html files and the different language versions of this document.

Ger 05:57, 11 March 2007 (PDT)



The drawimage 1 example is missing the background image, so it doesn't render. Tinus 01:41, 29 September 2005 (PDT)

Fixed: added 'images/' before 'backdrop.png' Ger 05:57, 11 March 2007 (PDT)

Revision Source

<p>If you use an <code>onload</code> event handler, it should be added before setting img.src:
</p>
<pre class="eval">var img = new Image();   // Create new Image object
img.onload = function(){
  // execute drawImage statements here
}
img.src = 'myImage.png'; // Set source path
</pre>
<p>If img.onload was after img.src, then img might be loaded by the time execution gets to the img.onload=... line. In that case, the onload handler is never executed. This is not just a fictional coding style rant - it prevents execution on Opera 9, and it might also be an issue on future Mozilla browsers.
</p><p>If you agree, this order change could be spread to the sample html files and the different language versions of this document.
</p><p><a href="User:Ger">Ger</a> 05:57, 11 March 2007 (PDT)
</p><p><br>
</p><p><br>
The drawimage 1 example is missing the background image, so it doesn't render. <a href="User:Tinus">Tinus</a> 01:41, 29 September 2005 (PDT)
</p><p>Fixed: added 'images/' before 'backdrop.png' <a href="User:Ger">Ger</a> 05:57, 11 March 2007 (PDT)
</p>
Revert to this revision