Home/ Questions/Q 7004491
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T21:12:21+00:00

I’m trying to get canvas to work with IE using excanvas. However it doesn’t

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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