I'm trying to get canvas to work with IE using excanvas. However it doesn't seem to show up anywhere.
The below code works on all browsers except IE.
I tried following the suggestions on excanvas' project page to no avail.
Any help would be appreciated!
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="excanvas.compiled.js"></script>
</head>
<body id="body">
<script type="text/javascript">
load();
function load(){
var canvas = document.createElement("canvas");
if(typeof G_vmlCanvasManager !== "undefined")
G_vmlCanvasManager.initElement(canvas);
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.beginPath();
ctx.arc(50,50,12,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
document.getElementById("body").appendChild(canvas);
}
</script>
</body>
</html>
Don't ask me why, but apparently after creating a static canvas and drawing to it, the dynamically created ones start working... Also, calling the "load" method in the body's "onload" - instead of doing it directly - seems to be important too (again, why it behaves that way is beyond my understanding).
The solution below worked fine for me (IE6):
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="excanvas.compiled.js"></script>
</head>
<body onload="load()" id="body">
<canvas id="static" style="display:none"></canvas>
<script type="text/javascript">
function load(){
// Static
var canvas = document.getElementById("static");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.beginPath();
ctx.arc(50,50,12,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
// Dynamic
var canvas = document.createElement("canvas");
if(typeof G_vmlCanvasManager !== "undefined")
G_vmlCanvasManager.initElement(canvas);
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.beginPath();
ctx.arc(50,50,12,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
document.getElementById("body").appendChild(canvas);
}
</script>
</body>
</html>