HTML5 Canvas for Internet Explorer via Flash

Dropdown Menu

FlashCanvas Pro 1.4 released

What's new in FlashCanvas Pro 1.4?

(Enhancements)

  • Added new features to drawImage() and createPattern().
    • Made it possible to take an HTMLCanvasElement as an argument.
    • Made it possible to load image files from other domain.
  • Prepared FlashCanvas.saveImage() method.
  • textAlign gets to support the directionality of "rtl".
  • Refactored the handling of resize event.
  • Some performance improvements.

(Bug fixes)

  • Canvas was rendered incorrectly when printed.
    • Canvas was expanded if the page was in quirks mode.
    • The background was painted gray.
  • Tweaked the color parser to check the input more strictly.
  • Shadows were not rendered according to the drawing model.

(etc.)

  • Included canvas2png.js script that can be used to save a canvas image.
  • Included more benchmark programs and test cases.
  • Made the examples compatible with IE9.

Canvas-to-canvas copy

From this version, drawImage() and createPattern() methods can take an HTMLCanvasElement as an argument. But you should know that this canvas-to-canvas copy feature has a restriction originated from Flash; you cannot copy an image from hidden/offscreen canvases. For example, here is a result of my little experiment.

<canvas id="canvas1" width="100" height="100"></canvas>
<canvas id="canvas2" width="100" height="100"></canvas>
<style>
#canvas1 {
    position: absolute;
    left: -99px;
}
</style>

This canvas1 is nearly hidden, but its right edge is inside the screen. In this case, we can copy the image from canvas1 to canvas2 without problems. If we change the position to {left: -100px}, however, canvas1 becomes entirely hidden, and the copy fails.

canvas2png.js

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);