Search code examples
internet-explorercanvasexcanvas

Excanvas: not displaying on page


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>

Solution

  • 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>