Getting IE8 compatibility with EaselJS and ExplorerCanvas

Question

I am using EaselJS and want to allow for backwards compatibility with ExplorerCanvas.

This should be possible using the following code (see here):

c         


        

Answer 1

I ran across this issue as well, trying to get ExCanvas to play nice with EaselJS. Here is how I got it working. Hope this helps with your image issue.

• Get the source code for EaselJS : https://github.com/gskinner/EaselJS.git. This will get all the javascript files separated out into their own parts.
• Copy all those files over to a "easel" folder in your project directory.
• The order in which the files are loaded is important, so see below on how to do it.
• EaselJS has an option to override the createCanvas method, which is required to use ExCanvas with it. This happens after loading the SpriteSheet.js file, and BEFORE loading Graphics.js, DisplayObject.js, Container.js, etc. In the code below, I used jQuery to load the rest of the js files that easelJs needed. This all happens in the $(document).ready() function.

• If done correctly, you should see a 700 x 700 canvas with a red line from top left to bottom right in IE (tested in 8).

  head>

          <!--
              Load ExCanvas first, and jquery
          -->
          <script type='text/javascript' src='./javascript/excanvas.js'></script>
          <script type='text/javascript' src='./javascript/jquery-1.8.2.min.js'></script>
  
          <!--
              Have to load Easel js files in a certain order, and override the createCanvas
              function in order for it to work in < IE9.
          -->
          <script type='text/javascript' src='./javascript/easel/UID.js'></script>
          <script type='text/javascript' src='./javascript/easel/Ticker.js'></script>
          <script type='text/javascript' src='./javascript/easel/EventDispatcher.js'></script>
          <script type='text/javascript' src='./javascript/easel/MouseEvent.js'></script>
          <script type='text/javascript' src='./javascript/easel/Matrix2D.js'></script>
          <script type='text/javascript' src='./javascript/easel/Point.js'></script>
          <script type='text/javascript' src='./javascript/easel/Rectangle.js'></script>
          <script type='text/javascript' src='./javascript/easel/Shadow.js'></script>
          <script type='text/javascript' src='./javascript/easel/SpriteSheet.js'></script>
  
          <script type='text/javascript'>
              var canvas, stage;
  
              createjs.createCanvas = function () { return getCanvas(); };
  
              function getCanvas() {
                  // This is needed, otherwise it will keep adding canvases, but it only use the last one it creates.
                  canvas = document.getElementById("myCanvas");
                  if (canvas != null) {
                      document.getElementById("container").removeChild(canvas);
                  }
                  canvas = document.createElement("canvas");
                  document.getElementById("container").appendChild(canvas);
                  if (typeof (G_vmlCanvasManager) != 'undefined') {
                      canvas = G_vmlCanvasManager.initElement(canvas);
                      canvas.setAttribute("height", "700");
                      canvas.setAttribute("width", "700");
                      canvas.setAttribute("style", "height:700px; width:700px;");
                      canvas.setAttribute("id", "myCanvas");
                  }
                  return canvas;
              }
          </script>
  
          <script type="text/javascript">
              $(document).ready(function () {
                  loadOtherScripts();
                  stage = new createjs.Stage(canvas);
  
                  // Draw a red line from top left to bottom right
                  var line = new createjs.Shape();
                  line.graphics.clear();
                  line.graphics.setStrokeStyle(2);
                  line.graphics.beginStroke("#FF0000");
                  line.graphics.moveTo(0, 0);
                  line.graphics.lineTo(700, 700);
                  stage.addChild(line);
  
                  stage.update();
              });
  
              function loadOtherScripts() {
                  var jsAr = new Array(13);
  
                  jsAr[0] = './javascript/easel/Graphics.js';
                  jsAr[1] = './javascript/easel/DisplayObject.js';
                  jsAr[2] = './javascript/easel/Container.js';
                  jsAr[3] = './javascript/easel/Stage.js';
                  jsAr[4] = './javascript/easel/Bitmap.js';
                  jsAr[5] = './javascript/easel/BitmapAnimation.js';
                  jsAr[6] = './javascript/easel/Shape.js';
                  jsAr[7] = './javascript/easel/Text.js';
                  jsAr[8] = './javascript/easel/SpriteSheetUtils.js';
                  jsAr[9] = './javascript/easel/SpriteSheetBuilder.js';
                  jsAr[10] = './javascript/easel/DOMElement.js';
                  jsAr[11] = './javascript/easel/Filter.js';
                  jsAr[12] = './javascript/easel/Touch.js';
  
                  for (var i = 0; i < jsAr.length; i++) {
                      var js = jsAr[i];
                      $.ajax({
                          async: false,
                          type: "GET",
                          url: js,
                          data: null,
                          dataType: 'script'
                      });
                  }
              }
      </head>
      <body>
          <div id="container"></div>
      </body>
  </html>
  

Answer 2

You should instantiate the quasi canvas element by making reference to the original canvas source as provided on the project page example:

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

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

EDIT:

After further investigation i came to the following conclusions! There are multiple reasons for not being able to include the image into the canvas:

1. 1st probably there is a bug in the excanvas code for not being able to mimic the native canvas features. I used with more success the modified sancha code, which you can obtain here: http://dev.sencha.com/playpen/tm/excanvas-patch/excanvas-modified.js. See live example here: http://jsfiddle.net/aDHKm/ (try it on IE).
2. 2nd before Easeljs initialize the core objects and classes first is searching for the canvas element existence. Because IE < 9 doesn't have implemented the canvas it's obvious that easeljs core graphics API's can not be instantiated. I think these are the two main reasons that your code is not working.

My suggestion is to try to remake the code without the easeljs. I made a fiddle with the necessary modification to show you how can be done without easeljs: http://jsfiddle.net/xdXrw/. I don't know if it's absolute imperative for you to use easeljs, but certainly it has some limitations in terms of IE8 hacked canvas.