HTMLCanvas 'getContext' is not a supported property or method

Question

I've just lauched a HTML5 game application, and I keep receiving 'object doesn't support property or method 'getContext' errors logs from some of my users.

My setup only allows users with Chrome (16<), Firefox (9<) or IE (9<) to play the game. IE (<9) users gets a chromeframe installation in their face.

Its only some of my IE9 users that throw this exception. I've played the game on several windows machines with IE9, both vista and windows 7.

Searching my source, for the function call getContext, I get the same pattern. I create a canvas element using document.createElement, and then i call getContext('2d'), the next line.

var buffer = /** @type {!HTMLCanvasElement} */ (document.createElement('canvas')),
    ctx = /** @type {!CanvasRenderingContext2D} */ (buffer.getContext('2d')),
    draw = function(ctx) {
       /**
        * Alot of drawing calls.
        */
    };
draw(ctx);

Given that alot of my IE9 users run the game as it should, i don't think that this is a problem with my code, but rather some toolbar/plugin or setting in IE9 that is tripping me here.

What do you guys think ?

Answer 1

After inserting <meta http-equiv="X-UA-Compatible" content="chrome=1, IE=edge"> we have reduced the bug count a lot, we still have a few, but that could be users logging in with weird browsers that the chromeframe install check doesn't catch.

chrome=1 means 'use chrome frame' if its there.

IE=edge means 'use highest possible version of IE'.

So i'll go with that for now.

Answer 2

as far as i know IE9 fully supports canvas tag. But user should make sure he is not in compatibility mode. But just to avoid the problem i suggest u using excanvas. If you dont know the how download excanvas and add following link

<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->

Answer 3

Have you considered the possibility that users don't know which version of IE they are using and are reporting it incorrectly?

Answer 4

From Instructions

Dynamically created elements If you have created your canvas element dynamically it will not have the getContext method added to the element. To get it working you need to call initElement on the G_vmlCanvasManager object.

var el = document.createElement('canvas');
G_vmlCanvasManager.initElement(el);
var ctx = el.getContext('2d');