You could also add a listener to the image to check that it actually loads:<br><br><p class="MsoNormal"> </p>
<p style="" class="MsoNormal"><span style="font-size: 10pt; font-family: "Courier New"; color: black; background: none repeat scroll 0% 0% white;">$</span><span style="font-size: 10pt; font-family: "Courier New"; color: rgb(92, 92, 92); background: none repeat scroll 0% 0% white;">(</span><span style="font-size: 10pt; font-family: "Courier New"; color: black; background: none repeat scroll 0% 0% white;">document</span><span style="font-size: 10pt; font-family: "Courier New"; color: rgb(92, 92, 92); background: none repeat scroll 0% 0% white;">).</span><span style="font-size: 10pt; font-family: "Courier New"; color: black; background: none repeat scroll 0% 0% white;">ready</span><span style="font-size: 10pt; font-family: "Courier New"; color: rgb(92, 92, 92); background: none repeat scroll 0% 0% white;">(</span><b><span style="font-size: 10pt; font-family: "Courier New"; color: rgb(0, 0, 192); background: none repeat scroll 0% 0% white;">function</span></b><span style="font-size: 10pt; font-family: "Courier New"; color: rgb(92, 92, 92); background: none repeat scroll 0% 0% white;">()</span><span style="font-size: 10pt; font-family: "Courier New"; background: none repeat scroll 0% 0% white;"> <span style="color: rgb(92, 92, 92);">{</span></span><span style="font-size: 10pt; font-family: "Courier New";"></span></p>
<p style="" class="MsoNormal"><span style="font-size: 10pt; font-family: "Courier New"; background: none repeat scroll 0% 0% white;"> <b><span style="color: rgb(0, 0, 192);">var</span></b> <span style="color: black;">image</span>
<span style="color: rgb(92, 92, 92);">=</span> <span style="color: black;">$</span><span style="color: rgb(92, 92, 92);">(</span><span style="color: rgb(0, 92, 0);">"#cat"</span><span style="color: rgb(92, 92, 92);">).</span><span style="color: black;">get</span><span style="color: rgb(92, 92, 92);">(</span><span style="color: rgb(0, 64, 128);">0</span><span style="color: rgb(92, 92, 92);">);</span></span><span style="font-size: 10pt; font-family: "Courier New";"></span></p>
<p style="" class="MsoNormal"><span style="font-size: 10pt; font-family: "Courier New"; background: none repeat scroll 0% 0% white;"> image.onload = function(e){</span><span style="font-size: 10pt;"></span></p>
<p style="" class="MsoNormal"><span style="font-size: 10pt; font-family: "Courier New"; background: none repeat scroll 0% 0% white;">
<b><span style="color: rgb(0, 0, 192);">var</span></b> <span style="color: black;">cv</span>
<span style="color: rgb(92, 92, 92);">=</span> <span style="color: black;">$</span><span style="color: rgb(92, 92, 92);">(</span><span style="color: rgb(0, 92, 0);">"#img_container"</span><span style="color: rgb(92, 92, 92);">).</span><span style="color: black;">get</span><span style="color: rgb(92, 92, 92);">(</span><span style="color: rgb(0, 64, 128);">0</span><span style="color: rgb(92, 92, 92);">);</span>
</span><span style="font-size: 10pt;"></span></p>
<p style="" class="MsoNormal"><span style="font-size: 10pt; font-family: "Courier New"; background: none repeat scroll 0% 0% white;">
<b><span style="color: rgb(0, 0, 192);">var</span></b> <span style="color: black;">ctx</span>
<span style="color: rgb(92, 92, 92);">=</span> <span style="color: black;">cv</span><span style="color: rgb(92, 92, 92);">.</span><span style="color: black;">getContext</span><span style="color: rgb(92, 92, 92);">(</span><span style="color: rgb(0, 92, 0);">'2d'</span><span style="color: rgb(92, 92, 92);">);</span></span><span style="font-size: 10pt; font-family: "Courier New";"></span></p>
<p style="" class="MsoNormal"><span style="font-size: 10pt; font-family: "Courier New"; background: none repeat scroll 0% 0% white;">
</span><span style="font-size: 10pt;"></span></p>
<p style="" class="MsoNormal"><span style="font-size: 10pt; font-family: "Courier New"; background: none repeat scroll 0% 0% white;">
<span style="color: black;">ctx</span><span style="color: rgb(92, 92, 92);">.</span><span style="color: black;">drawImage</span><span style="color: rgb(92, 92, 92);">(</span><span style="color: black;">image</span><span style="color: rgb(92, 92, 92);">,</span> <span style="color: rgb(0, 64, 128);">0</span><span style="color: rgb(92, 92, 92);">,</span> <span style="color: rgb(0, 64, 128);">0</span><span style="color: rgb(92, 92, 92);">);</span></span></p>
<p style="" class="MsoNormal"> };<br><span style="font-size: 10pt; font-family: "Courier New"; background: none repeat scroll 0% 0% white;"><span style="color: rgb(92, 92, 92);"></span></span><span style="font-size: 10pt; font-family: "Courier New";"></span></p>
<span style="font-size: 10pt; font-family: "Courier New"; color: rgb(92, 92, 92); background: none repeat scroll 0% 0% white;">});</span><br><br><div class="gmail_quote">On Sun, May 23, 2010 at 10:30 PM, Schalk Neethling <span dir="ltr"><<a href="mailto:schalk@ossreleasefeed.com">schalk@ossreleasefeed.com</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin: 0pt 0pt 0pt 0.8ex; border-left: 1px solid rgb(204, 204, 204); padding-left: 1ex;">Jip, using $(window).load() works perfect.<br>
<div class="im"><br>
-----Original Message-----<br>
From: Eduard Pascual [mailto:<a href="mailto:herenvardo@gmail.com">herenvardo@gmail.com</a>]<br>
Sent: Sunday, May 23, 2010 12:33 PM<br>
To: Schalk Neethling<br>
Cc: <a href="mailto:whatwg@lists.whatwg.org">whatwg@lists.whatwg.org</a><br>
Subject: Re: [whatwg] Canvas and Image problems<br>
<br>
</div><div><div></div><div class="h5">On Sun, May 23, 2010 at 12:16 PM, Schalk Neethling<br>
<<a href="mailto:schalk@ossreleasefeed.com">schalk@ossreleasefeed.com</a>> wrote:<br>
> Hi everyone,<br>
><br>
><br>
><br>
> Having a really weird problem that I would like some input on. I am<br>
> trying to draw an image, as well as video, onto canvas. I use the<br>
> simple code<br>
> below:<br>
><br>
><br>
><br>
> $(document).ready(function() {<br>
><br>
> var image = $("#cat").get(0);<br>
><br>
><br>
><br>
> var cv = $("#img_container").get(0);<br>
><br>
> var ctx = cv.getContext('2d');<br>
><br>
><br>
><br>
> ctx.drawImage(image, 0, 0);<br>
><br>
> });<br>
><br>
><br>
><br>
> When I load up the HTML page in Chrome absolutely nothing happens and<br>
> I see no errors in the JavaScript console. When running it in Firefox<br>
> 3.6.3 I get the following error:<br>
><br>
><br>
><br>
> uncaught exception: [Exception... "Component returned failure code:<br>
> 0x80040111 (NS_ERROR_NOT_AVAILABLE)<br>
> [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80040111<br>
> (NS_ERROR_NOT_AVAILABLE)" location: "JS frame ::<br>
> file:///C:/thelab/HTML5Canvas/scripts/canvas_img.js :: anonymous :: line<br>
9"<br>
> data: no]<br>
><br>
><br>
><br>
> For The life of me I cannot see what I am doing wrong with the above.<br>
> I have done console logs to ensure that the code get’s the image as<br>
> well as the canvas on the relevant lines and it definitely does.<br>
> Anything I am overlooking?<br>
<br>
IIRC correctly, jQuery's document ready event is fired as soon as the HTML<br>
itself is loaded and the DOM is built, unlike <html>'s onload which waits<br>
also for all external stuff (CSS, JS, images, etc) to be available. This is<br>
a good thing to speed up things that don't depend on external content but,<br>
in your case, it seems you are trying to use the src resource of an <img><br>
element before it's available. I'm no jQuery expert, so I can't tell for<br>
sure; but you may check it out by running your code from <html>'s onload<br>
event instead of the document ready event.<br>
<br>
Regards,<br>
Eduard Pascual<br>
<br>
</div></div></blockquote></div><br>