HTML5 Canvas for Internet Explorer via Flash

Dropdown Menu

How to use FlashCanvas in your web page

Include flashcanvas.js

FlashCanvas consists of JavaScript, Flash and PHP files:

  • FlashCanvas
    • flashcanvas.js
    • flashcanvas.swf
  • FlashCanvas Pro
    • flashcanvas.js
    • flash9canvas.swf
    • flash10canvas.swf
  • Optional files
    • canvas2png.js
    • proxy.php
    • save.php

These files can be found in the bin directory in the distribution package. To install FlashCanvas, copy these files into some directory on a Web server, and then add the following HTML code between <head> and </head> tags on your web page.

<!--[if lt IE 9]>
<script type="text/javascript" src="path/to/flashcanvas.js"></script>
<![endif]-->

At the same time, you should check that your site is in IE9 standards mode when viewed with IE9. In other document modes, IE9 cannot display canvas elements. If you don't know how to configure the document mode, you should read this article posted on IEBlog.

Initialize Canvas elements

When flashcanvas.js is loaded, it automatically initializes canvas elements in the HTML document. But in the following cases, you need to manually initialize the element by calling FlashCanvas.initElement() method.

  • If you create a canvas element dynamically using document.createElement("canvas").
  • If you use a canvas element before window.onload event is fired.

To make the code cross-browser, you should also check the existence of FlashCanvas object. Here is a sample code:

var canvas = document.createElement("canvas");
document.getElementById("target").appendChild(canvas);
if (typeof FlashCanvas != "undefined") {
    FlashCanvas.initElement(canvas);
}

Use FlashCanvas instead of ExplorerCanvas

Some existing canvas applications such as Flot and JavaScript InfoVis Toolkit utilize ExplorerCanvas library to support Internet Explorer. To ensure the compatibility with ExplorerCanvas, FlashCanvas also implements the G_vmlCanvasManager object and its methods. Therefore, if you load flashcanvas.js instead of excanvas.js, most of those applications will work without modifying your code.

Save a canvas image

When you need to save a canvas image as an image file, Canvas2Image library is a commonly-used solution. Unfortunately, however, this library does not work well with some browsers such as Internet Explorer.

As an alternative and cross-browser solution, we prepared canvas2png.js script that works with all major browsers. This script saves a canvas image as a PNG file with the help of save.php script. canvas2png.js provides only one function, canvas2png(), that takes an HTMLCanvasElement as an argument and can be used in the following way.

var canvas = document.getElementById("mycanvas");
canvss2png(canvas);

And it is also possible for FlashCanvas users to save a canvas image from the right-click menu.

Load images from other domain

FlashCanvas uses flash.display.Loader.load() method to load images, but this method has a restriction that it cannot load images from other domain. To avoid this problem, we prepared proxy.php, a PHP script that proxies a request to other domains. This script is automatically called from FlashCanvas when you load an image from other domain. To make the PHP script work, you must enable cURL extension or allow_url_fopen option of PHP.

Alternatively, FlashCanvas can utilize a cross-domain policy file instead of the proxy.php script. If you'd like to use that feature, please read the description of usePolicyFile option.

Load flashcanvas.js asynchronously

We do recommend that you load flashcanvas.js as early as you can in the <head> tags. But it is possible to load flashcanvas.js using Ajax if you write your code carefully.

  • You must ensure that document.createElement("canvas") is executed before any canvas element appears. Normally, this code is automatically executed within flashcanvas.js. But if flashcanvas.js will be loaded late, you should execute this HTML5 shiv manually.
  • You should set the location of the SWF files by using the swfPath option because an automatic detection of the URL will fail in that case.

Here is a sample code.

document.createElement("canvas");
window.FlashCanvasOptions = {
    swfPath: "http://example.com/js/"
};
jQuery.getScript("flashcanvas.js", function(){
    ......
});