<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:"Calibri","sans-serif";
color:windowtext;}
span.objectbox
{mso-style-name:objectbox;}
.MsoChpDefault
{mso-style-type:export-only;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal>Hi everyone,<o:p></o:p></p>
<p class=MsoNormal><o:p> </o:p></p>
<p class=MsoNormal>Having a really weird problem that I would like some input
on. I am trying to draw an image, as well as video, onto canvas. I use the
simple code below:<o:p></o:p></p>
<p class=MsoNormal><o:p> </o:p></p>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:"Courier New";color:black;background:white;mso-highlight:white'>$</span><span
style='font-size:10.0pt;font-family:"Courier New";color:#5C5C5C;background:
white;mso-highlight:white'>(</span><span style='font-size:10.0pt;font-family:
"Courier New";color:black;background:white;mso-highlight:white'>document</span><span
style='font-size:10.0pt;font-family:"Courier New";color:#5C5C5C;background:
white;mso-highlight:white'>).</span><span style='font-size:10.0pt;font-family:
"Courier New";color:black;background:white;mso-highlight:white'>ready</span><span
style='font-size:10.0pt;font-family:"Courier New";color:#5C5C5C;background:
white;mso-highlight:white'>(</span><b><span style='font-size:10.0pt;font-family:
"Courier New";color:#0000C0;background:white;mso-highlight:white'>function</span></b><span
style='font-size:10.0pt;font-family:"Courier New";color:#5C5C5C;background:
white;mso-highlight:white'>()</span><span style='font-size:10.0pt;font-family:
"Courier New";background:white;mso-highlight:white'> <span style='color:#5C5C5C'>{</span></span><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:"Courier New";background:white;mso-highlight:white'>
<b><span style='color:#0000C0'>var</span></b> <span style='color:black'>image</span>
<span style='color:#5C5C5C'>=</span> <span style='color:black'>$</span><span
style='color:#5C5C5C'>(</span><span style='color:#005C00'>"#cat"</span><span
style='color:#5C5C5C'>).</span><span style='color:black'>get</span><span
style='color:#5C5C5C'>(</span><span style='color:#004080'>0</span><span
style='color:#5C5C5C'>);</span></span><span style='font-size:10.0pt;font-family:
"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:"Courier New";background:white;mso-highlight:white'>
</span><span style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:"Courier New";background:white;mso-highlight:white'>
<b><span style='color:#0000C0'>var</span></b> <span style='color:black'>cv</span>
<span style='color:#5C5C5C'>=</span> <span style='color:black'>$</span><span
style='color:#5C5C5C'>(</span><span style='color:#005C00'>"#img_container"</span><span
style='color:#5C5C5C'>).</span><span style='color:black'>get</span><span
style='color:#5C5C5C'>(</span><span style='color:#004080'>0</span><span
style='color:#5C5C5C'>);</span> </span><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:"Courier New";background:white;mso-highlight:white'>
<b><span style='color:#0000C0'>var</span></b> <span style='color:black'>ctx</span>
<span style='color:#5C5C5C'>=</span> <span style='color:black'>cv</span><span
style='color:#5C5C5C'>.</span><span style='color:black'>getContext</span><span
style='color:#5C5C5C'>(</span><span style='color:#005C00'>'2d'</span><span
style='color:#5C5C5C'>);</span></span><span style='font-size:10.0pt;font-family:
"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:"Courier New";background:white;mso-highlight:white'>
</span><span style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:"Courier New";background:white;mso-highlight:white'>
<span style='color:black'>ctx</span><span style='color:#5C5C5C'>.</span><span
style='color:black'>drawImage</span><span style='color:#5C5C5C'>(</span><span
style='color:black'>image</span><span style='color:#5C5C5C'>,</span> <span
style='color:#004080'>0</span><span style='color:#5C5C5C'>,</span> <span
style='color:#004080'>0</span><span style='color:#5C5C5C'>);</span></span><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:"Courier New";
color:#5C5C5C;background:white;mso-highlight:white'>});</span><span
style='font-size:10.0pt;font-family:"Courier New";color:#5C5C5C'><o:p></o:p></span></p>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:"Courier New";
color:#5C5C5C'><o:p> </o:p></span></p>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:"Courier New";
color:#5C5C5C'>When I load up the HTML page in Chrome absolutely nothing
happens and I see no errors in the JavaScript console. When running it in Firefox
3.6.3 I get the following error:<o:p></o:p></span></p>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:"Courier New";
color:#5C5C5C'><o:p> </o:p></span></p>
<p class=MsoNormal><span class=objectbox>uncaught exception: [Exception...
"Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE)
[nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80040111
(NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: <a
href="file:///C:\thelab\HTML5Canvas\scripts\canvas_img.js">file:///C:/thelab/HTML5Canvas/scripts/canvas_img.js</a>
:: anonymous :: line 9" data: no]<o:p></o:p></span></p>
<p class=MsoNormal><span class=objectbox><o:p> </o:p></span></p>
<p class=MsoNormal><span class=objectbox>For The life of me I cannot see what I
am doing wrong with the above. I have done console logs to ensure that the code
get’s the image as well as the canvas on the relevant lines and it
definitely does. Anything I am overlooking?<o:p></o:p></span></p>
<p class=MsoNormal><span class=objectbox><o:p> </o:p></span></p>
<p class=MsoNormal><span class=objectbox>Thank you all in advance,<o:p></o:p></span></p>
<p class=MsoNormal><span class=objectbox>Schalk</span><o:p></o:p></p>
<p class=MsoNormal><o:p> </o:p></p>
</div>
</body>
</html>