HTML5のCanvasエレメントをInternetExplorerで使うための2つのライブラリ、ExplorerCanvasとFlashCanvasの機能サポート状況を表にまとめてみた。
HTMLCanvasElement
| ExplorerCanvas | FlashCanvas | FlashCanvas Pro | |
|---|---|---|---|
| width | ○ | ○ | ○ |
| height | ○ | ○ | ○ |
| getContext() | ○ | ○ | ○ |
| toDataURL() | × | ○ | ○ |
CanvasRenderingContext2D
| ExplorerCanvas | FlashCanvas | FlashCanvas Pro | |
|---|---|---|---|
| addColorStop() | ○ | ○ | ○ |
| arc() | ○ | ○ | ○ |
| arcTo() | × | ○ | ○ |
| beginPath() | ○ | ○ | ○ |
| bezierCurveTo() | ○ | ○ | ○ |
| clip() | × | ○ | ○ |
| closePath() | ○ | ○ | ○ |
| clearRect() | △※引数を無視してCanvas全体を消去 | ○ | ○ |
| createLinearGradient() | ○ | ○ | ○ |
| createImageData() | × | × | ○ |
| createPattern() | ○ | ○ | ○ |
| drawImage() | ○ | △※ソースはimageエレメントのみ | △※ソースはimageエレメントのみ |
| fill() | ○ | ○ | ○ |
| fillRect() | ○ | ○ | ○ |
| fillStyle | ○ | ○ | ○ |
| fillText() | ※要canvas-text | × | ○ |
| font | ※要canvas-text | × | ○ |
| getImageData() | × | × | ○※遅い |
| globalAlpha | ○ | ○ | ○ |
| globalCompositeOperation | × | × | ○ |
| isPointInPath() | × | × | ○ |
| lineJoin | ○ | ○ | ○ |
| lineTo() | ○ | ○ | ○ |
| lineWidth | ○ | ○ | ○ |
| measureText() | ※要canvas-text | × | ○ |
| miterLimit | ○ | ○ | ○ |
| moveTo() | ○ | ○ | ○ |
| putImageData() | × | × | ○※遅い |
| quadraticCurveTo() | ○ | ○ | ○ |
| rect() | ○ | ○ | ○ |
| restore() | ○ | ○ | ○ |
| save() | ○ | ○ | ○ |
| scale() | ○ | ○ | ○ |
| setTransform() | ○ | ○ | ○ |
| shadowBlur | × | × | ○ |
| shadowColor | × | × | ○ |
| shadowOffsetX | × | × | ○ |
| shadowOffsetY | × | × | ○ |
| stroke() | ○ | × | ○ |
| strokeRect() | ○ | ○ | ○ |
| strokeText() | ※要canvas-text | × | ○ |
| textAlign | × | × | ○ |
| textBaseline | × | × | ○ |
| transform | ○ | ○ | ○ |
| translate() | ○ | ○ | ○ |
その他
| ExplorerCanvas | FlashCanvas | FlashCanvas Pro | |
|---|---|---|---|
| ライセンス | オープンソース (Apache License V2.0) |
オープンソース (The MIT License) |
クローズドソース (非営利使用は無償、商用使用は有償) |
| Canvas代替技術 | VML | Flash Player 9 | Flash Player 10 (Flash Player 9 もサポート) |
注意点
これらライブラリの使用により、Canvasエレメントを使ったページがすべて無改造で動くわけではない。
サポートされていない機能が使えないのはもちろんだけど、他にも細かい動作の違いは多々ある。
特に注意が必要なのは、document.createElement("canvas")などでCanvasを動的に生成する場合だ。
ExplorerCanvasなら
var canvas = document.createElement("canvas");
document.getElementById("target").appendChild(canvas);
if (typeof initElement != "undefined") {
canvas = initElement(canvas);
}
FlashCanvasだと
var canvas = document.createElement("canvas");
document.getElementById("target").appendChild(canvas);
if (typeof FlashCanvas != "undefined") {
FlashCanvas.initElement(canvas);
}
のようにおまじないが必要になる。
このおまじないは、CanvasエレメントをdocumentのDOMツリー内にバインドしてから行う必要がある。
Canvasエレメントをどこにもappendせずに作業用のフレームバッファとして扱いたい場合は面倒だ。
まとめ
lislis PainterをIE対応にできないものかと思って調べてみたけど、現状ではどちらも肝心な機能が欠けているので使えないと結論。
InternetExplorer 9のPreview版でも、Canvasをサポートしていないけど、正式版では対応してくれるといいなあ・・・
