Using images

  • Revision slug: Talk:Canvas_tutorial/Using_images
  • Revision title: Using images
  • Revision id: 121168
  • Created:
  • Creator: happysadman
  • Is current revision? No
  • Comment no wording changes

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)

Slicing -> drawImage example 3

... The image of the picture frame includes a dropshadow which has been saved as a 24-bit PNG image. Because 24-bit PNG images include a full 8-bit alpha channel, unlike GIF and 8-bit PNG images, I can ...

I think that it should be 32-bit for PNG with alpha channel and 24-bit without alpha channel. happysadman 14 August 2009

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" title="User:Ger">Ger</a> 05:57, 11 March 2007 (PDT)</p>
<p> </p>
<p><br>
The drawimage 1 example is missing the background image, so it doesn't render. <a href="/User:Tinus" title="User:Tinus">Tinus</a> 01:41, 29 September 2005 (PDT)</p>
<p>Fixed: added 'images/' before 'backdrop.png' <a href="/User:Ger" title="User:Ger">Ger</a> 05:57, 11 March 2007 (PDT)</p>
<blockquote>
<p><em>Slicing -&gt; drawImage example 3</em></p>
<p>... The image of the picture frame includes a dropshadow which has been saved as a <span style="color: rgb(255, 0, 0);"><strong>24-bit PNG image. Because 24-bit PNG images</strong></span> include a full 8-bit alpha channel, unlike GIF and <span style="color: rgb(255, 0, 0);"><strong>8-bit PNG images</strong></span>, I can ...</p>
</blockquote>
<p>I think that it should be <strong>32-bit</strong> for PNG with alpha channel and <strong>24-bit</strong> without alpha channel. <a href="/User:happysadman" rel="custom nofollow">happysadman</a> 14 August 2009</p>
Revert to this revision