1

I am trying to implement excanvas in order to ensure canvas tags work in IE8 as well as all the other browsers we use here. I am having an issue getting getContext to work in IE8. I have read about the need to us the G_vmlCanvasManager.initElement routine when dynamically creating canvas objects in the DOM, however I cannot even get statically created objects to work in IE8. I can tell the canvas is create properly because the border appears. All other browsers have no issues. Here is the code:

<div align="right">
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
if (typeof window.G_vmlCanvasManager!="undefined") { 
    c=window.G_vmlCanvasManager.initElement(c);
    var cxt=c.getContext("2d");
   }else 
    var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

</script>
</div>

Thanks for any help you can give.

Christian Kuetbach
  • 15,850
  • 5
  • 43
  • 79
Phillip
  • 21
  • 1
  • 1
  • 3
  • possible duplicate of [Possible to get Excanvas to work in IE 8?](http://stackoverflow.com/questions/941170/possible-to-get-excanvas-to-work-in-ie-8) – Prestaul Jul 07 '13 at 03:07

2 Answers2

2

window.onload or onLoad="drawSomething()" should work, same thing

    <head>
    <!--[if lt IE 9]>
        <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <script type="text/javascript" src="/assets/site/excanvas.min.js"></script>
    <![endif]-->
    </head>

    <figure id="logo" class="body">
        <canvas id="logo-canvas" width="490" height="135"></canvas>
        <script src="canvas.js" type="text/javascript"></script>
        <script type="text/javascript">
        window.onload = function() {
            var c=document.getElementById("logo-canvas");
            var cxt=c.getContext("2d");
            drawLogo( cxt );
        }
        </script>
    </figure><!-- /#logo -->';
Community
  • 1
  • 1
FoREacH
  • 143
  • 2
  • 13
1

Found a work around. Put code in header with an onload trigger and works fine now

Phillip
  • 21
  • 1
  • 1
  • 3