KineticJS wont load in Internet Explorer

Question

I got a seriously annoying problem - I just made a cute script in KineticJS - http://test.manwe.cz/kolac.php

As You can see, it works flawlessly in Chrome/FF, but in IE it just says that I cant use the method "indexOf" and points somewhere inside the Kineticjs.js ... I got the newest KineticJS version and I tried to debug it and it looks like the problem is in the Kinetic.Stage constructor. When I comment it out it works (but obviously nothing else works then) Thanks for your help, Im kinda desperate.

Answer 1

Well I am also having the same problem. So the best I've come up with adding the extra method in javascript.

    if (!Array.prototype.indexOf)
    {
      Array.prototype.indexOf = function(elt /*, from*/)
      {
        var len = this.length;

        var from = Number(arguments[1]) || 0;
        from = (from < 0)
             ? Math.ceil(from)
             : Math.floor(from);
        if (from < 0)
          from += len;

        for (; from < len; from++)
        {
          if (from in this &&
              this[from] === elt)
            return from;
        }
        return -1;
      };
    }

This will solve the indexOf problem, however that presents another issue. The lastest release seems to add get"Property"() and set"Property"().

My "Guess" is some of the inner workings of kinecticJS using this line of code:

 this.context = this.element.getContext('2d');

where as the line "In my humble opinion" should be

 this.setContext(this.getElement().getContext('2d'));

My other "Guess" is this can't be fixed by changing a few lines of code. I am not entirely sure on this though. I have just started to look at the issue. I might sugguest downgrading versions, but I am not sure if that will fix the problem or not.

Update:

So looking a little further, I found this post HTMLCanvas 'getContext' is not a supported property or method Which means none of my previous "Guesses" are correct. Summarizing the post above all you need is this line in your html head data:

<meta http-equiv="X-UA-Compatible" content="chrome=1, IE=edge">

This fixes the problem i have having in IE (Version 9.0.8112.16421)