We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Using images

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]

Document Tags and Contributors

Contributors to this page: David.humphrey, happysadman, Ger, Tinus
Last updated by: David.humphrey,