Adding a canvas dynamically

[CanvasNoob]

Hi All,

I am trying to add a canvas object dynamically under a certain
scenario. When I test my page standalone, it works fine, I see the
results of a drawRect (although I get the Activex warning bar on top
in IE).

My scenarion where this fails is I have a browser add-on in IE, so I
have a button in the toolbar. Upon clicking of this add-on button I
run the script and add some of my divs on the host page. These divs
appear fine 'above' the host page. Teh canvas also gets dynamically
addded to the page, but certain dimensions remains zero.

My code is here: doc is the document representation when running under
a addon.
<code>
oCan = doc.createElement("canvas");

oCan.id="mycanvas";
oCan.width="600";
oCan.height="600";

doc.body.appendChild(oCan);


oCan = G_vmlCanvasManager.initElement(doc.getElementById
("mycanvas"));
var ctx = doc.getElementById("mycanvas").getContext('2d');


alert("canvas object is :" + ctx);
ctx.clearRect(0,0,600,600);
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,600,600);

</code>

I see this DOM when the above has run:

<code>
<canvas style="WIDTH: 600px; HEIGHT: 600px" id=mycanvas width="600"
height="600">
<DIV style="POSITION: absolute; WIDTH: 0px; HEIGHT: 0px; OVERFLOW:
hidden">
<?xml:namespace prefix = g_vml_ />
<g_vml_:shape style="POSITION: absolute; WIDTH: 10px; HEIGHT: 10px"
path=" m -5,-5 l 5995,-5 l 5995,5995 l -5,5995 x " stroked="false"
coordsize="100 100" coordorigin="0 0" filled="true">
<g_vml_:fill opacity="1" color="#FF0000"></g_vml_:fill></g_vml_:shape>
</DIV>
</canvas>
</code>

Look at the DIV just under canvas element. Its height and width are
set to 0...Any idea why these are set to Zero? Is the code not able to
get the clientWidth & height property because I am in addon mode? Is
there a way to pas these from outside? I can go ahead and make the
change in my copy of excanvas.js but wanted to ask if there is
something obvious I am missing here.

Thanks!

[AndrewSh2]

Try to put this code in window.onload:

window.onload=function(){
//create canvas dynamically