Revision 121169 of Using images

  • Revision slug: Talk:Canvas_tutorial/Using_images
  • Revision title: Using images
  • Revision id: 121169
  • Created:
  • Creator: David.humphrey
  • Is current revision? Yes
  • Comment 145 words added

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

 

The doc says:

"When this script gets executed, the image starts loading. If loading isn't finished when a drawImage statement gets executed, the script halts until the image is finished loading. If you don't want this to happen, use an onload event handler:"

This is wrong.  The script won't halt, you'll get an exception, since the image isn't available yet:

Error: uncaught exception: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]"  nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)"  location: "JS frame :: http://scotland.proximity.on.ca/dxr/tmp/sync2.html :: <TOP_LEVEL> :: line 9"  data: no]

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>
<p> </p>
<p>The doc says:</p>
<p>"When this script gets executed, the image starts loading. If loading isn't finished when a <code>drawImage</code> statement gets executed, the script halts until the image is finished loading. If you don't want this to happen, use an <code>onload</code> event handler:"</p>
<p>This is wrong.  The script won't halt, you'll get an exception, since the image isn't available yet:</p>
<p>Error: uncaught exception: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]"  nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)"  location: "JS frame :: <a class=" external" href="http://scotland.proximity.on.ca/dxr/tmp/sync2.html" rel="freelink">http://scotland.proximity.on.ca/dxr/tmp/sync2.html</a> :: &lt;TOP_LEVEL&gt; :: line 9"  data: no]</p>
Revert to this revision