CODEWITHSUNDEEP
canvasinternet-explorer-8html5-canvaspolyfills
Mike Eng
Mike Eng

Reputation: 1681

IE 8 Canvas using excanvas polyfill: no errors, but animation is not running on IE 8

I have an animation using canvas that is working fine in Chrome. I am using the excanvas polyfill for IE 8 support. I attached excanvas using an IE conditional tag in the head, as per the excanvas instructions.

Working page here | Full code on Github

The simplified HTML:

<head>
    <meta charset="utf-8">
    <!--[if gte IE 9]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
    <!--[if lt IE 9]><meta http-equiv="X-UA-Compatible" content="IE=7" /><![endif]-->

    <link rel="stylesheet" href="css/normalize.min.css">
    <link rel="stylesheet" href="css/ecard.css">

    <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    <!--[if lt IE 9]><script src="js/vendor/excanvas.js"></script><![endif]-->
</head>
<body>
    <canvas id="card" width="1000" height="750"></canvas>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>

    <script src="js/ecard.js"></script>
</body>

I am defining ctx using a ternary operator as recommended by the answer

var canvas = (typeof(G_vmlCanvasManager) != 'undefined') ? G_vmlCanvasManager.initElement($("canvas#card")[0]) : $("canvas#card")[0];
    ctx = canvas.getContext('2d');

When I try to run the animation from IE 8, it does nothing. I see no errors in IE 8 Developer Tools. However, when I type ctx.fillRect(25, 25, 100, 100); in the IE 8 Developer Tools console and run it, I get the error " 'ctx' is undefined".

From IE 8 developer tools, it seems that excanvas.js is loaded properly. Any ideas?

Upvotes: 4

Views: 2676

Answers (1)

user1693593
user1693593

Reputation:

Try by adding this to the head:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

In standard mode VML used by excanvas is turned off.

And instead of this (if still a problem):

ctx = $("canvas#card")[0].getContext('2d');

try with:

var canvas = (typeof(G_vmlCanvasManager) != 'undefined') ? G_vmlCanvasManager.initElement($("canvas#card")[0]) : $("canvas#card")[0];

ctx = canvas.getContext('2d');

Upvotes: 2

Related Questions