Excanvas: not displaying on page

Question

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>

If you are using IE8, the mentioning of quirks mode in http://stackoverflow.com/questions/941170/does-anyone-could-make-excanvas-work-in-ie-8-with-jquery may help. — Wolfgang Kuehn, Dec 30 '11 at 23:35

score 0 · Accepted Answer · answered Dec 30 '11 at 23:51

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>

Your advice worked! I had to wait for body onload as well as append the dynamically created canvas element BEFORE initializing it with G_vmlCanvasManager. — KDV, Dec 31 '11 at 00:29

Excanvas: not displaying on page

1 Answers1