いま HTML5::Canvas って使えるの? (HTML::Canvas のサポート状況)

Opera の getContext("opera-2dgame") について追記しました。
fillText(strokeText) + pattern, + linerGrad, radialGrag について追記しました。
uupaa-excanvas.js ver 0.3 リリース版に基づき表を更新しました。
uupaa-excanvas.js ver 0.31で、drawImage(canvas, ...) をサポートしました。

先ほど Windows XP 上で調べました。Mac や Linux だとちょっと違うかもしれません。
# レンダリングの実例はhttp://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-excanvas.js/DEMO.htmで見れます。

凡例
- 5: 実装されており他のブラウザの描画結果と互換性がある(使える)
- 4: 制限があったり描画結果が他のブラウザと多少異なる(気をつければ使える)
- 2: 仕様は満たしていないが、できるだけ近い形で描画する(あまり使えない / 使えない)
- 1: 他のブラウザと描画結果が異なる(使えない)
- -: 未実装。APIを呼び出すとエラーになる場合もある(使えない)

注意: 使える / 使えないは感覚的なものですので、判断は各自でお願いします。

browsers

F: Firefox 3.1β3
S: Safari 4β
C: Chrome 2
O: Opera 10α
e: IE6〜8 + ExplorerCanvas(r3)
v: IE6〜8 + uupaa-excanvas.js(ver 0.3) (VML mode)
a: IE6〜8 + uupaa-excanvas.js(ver 0.3) (Silverlight mode)
a3: IE6〜8 + uupaa-excanvas.js(ver 0.3) (Silverlight3 mode)

HTMLCanvasElement support

Member	F	S	C	O	e	v	a	a3	Notes
width	5	5	5	5	5	5	5	5
height	5	5	5	5	5	5	5	5
toDataURL()	5	5	5	5	-	-	-	-
toDataURL("image/png")	5	5	5	5	-	-	-	-
toDataURL("image/jpeg")	5	5	5	5	-	-	-	-
getContext("2d")	5	5	5	5	5	5	5	5
getContext("opera-2dgame")	-	-	-	5	-	-	-	-	Opera only
getContext("3d")	-	-	-	5	-	-	-	-	Opera test build only

CanvasRenderingContext2D support

Member	F	S	C	O	e	v	a	a3	Notes
canvas	5	5	5	5	5	5	5	5
globalAlpha	5	5	4	5	5	5	5	5	Chromeは他のブラウザと異なり薄くなる
globalCompositeOperation	4	4	4	5	-	2	2	2	Opera以外は一部のみサポート
strokeStyle	5	5	5	5	4	5	5	5	ExplorerCanvasは色の指定に制限あり
fillStyle	5	5	5	5	4	5	5	5	ExplorerCanvasは色の指定に制限あり
lineWidth	5	5	5	5	5	5	5	5
lineCap	5	5	5	5	5	5	5	5
lineJoin	5	5	5	5	5	5	5	5
miterLimit	5	5	5	5	5	5	4	4	uupaa(Silverlight)は描画結果が異なる
shadowOffsetX	5	5	5	-	-	5	5	5
shadowOffsetY	5	5	5	-	-	5	5	5
shadowBlur	5	5	5	-	-	2	2	5	uupaa(Silverlight3)でblurサポート。Silverlight2以下やVMLでは擬似的な影を描画
shadowColor	5	5	5	-	-	2	5	5	uupaa(VML)はTextAPIで不透明度未サポート
font	5	5	5	-	-	5	5	5
textAlign	5	5	5	-	-	5	5	5
textBaseline	5	5	5	-	-	2	2	2	uupaaは"top"固定
xMissColor [*1]	-	-	-	-	-	5	5	5	uupaa only
xClearColor [*1]	-	-	-	-	-	5	5	5	uupaa only
xTiling [*1]	-	-	-	-	-	-	5	5	uupaa only
xShadowBlur [*1]	-	-	-	-	-	-	5	5	uupaa only
xFontScaleW [*1]	-	-	-	-	-	5	5	5	uupaa only
xFontScaleH [*1]	-	-	-	-	-	5	5	5	uupaa only
xTextMarginTop [*1]	-	-	-	-	-	5	5	5	uupaa only
save()	5	5	5	5	5	5	5	5
restore()	5	5	5	5	5	5	5	5
scale()	5	5	5	5	5	5	5	5
rotate()	5	5	5	5	5	5	5	5
translate()	5	5	5	5	5	5	5	5
transform()	5	5	5	5	5	5	5	5
setTransform()	5	5	5	5	5	5	5	5
clearRect()	5	5	5	5	2	4	4	4	ExplorerCanvasはパスを無視し全て消去、 uupaaは制限あり
fillRect()	5	5	5	5	5	5	5	5
strokeRect()	5	5	5	5	5	5	5	5
beginPath()	5	5	5	5	5	5	5	5
closePath()	5	5	5	5	5	5	5	5
moveTo()	5	5	5	5	5	5	5	5
lineTo()	5	5	5	5	5	5	5	5
quadraticCurveTo()	5	5	5	5	5	5	5	5
bezierCurveTo()	5	5	5	5	5	5	5	5
arcTo()	1	5	5	1	-	-	-	-	Firefox, Operaは描画結果が異なる
rect()	5	5	5	5	5	5	5	5
arc()	5	5	5	5	5	5	5	5
fill()	5	5	5	5	5	5	5	5
+ linearGradient	5	5	5	5	4	4	4	4
+ radialGradient	5	5	5	5	-	4	4	4
+ pattern	5	5	5	5	-	5	5	5
+ shadow	5	5	5	5	-	4	4	5
stroke()	5	5	5	5	5	5	5	5
+ linearGradient	5	5	5	5	2	2	4	4	VMLはstrokeでグラデーションが使えない(単色のみ)
+ radialGradient	5	5	5	5	-	4	4	4
+ pattern	5	5	5	5	-	5	5	5
+ shadow	5	5	5	5	-	4	4	5
clip()	5	5	5	5	-	2	4	4	uupaa(VML)は制限あり(ネストや複雑すぎるのはダメ)
isPointInPath()	5	5	5	5	-	-	-	-
fillText()	5	5	5	-	-	5	5	5
+ linearGradient	5	5	5	-	-	2	4	4
+ radialGradient	1	1	1	-	-	1	1	1
+ pattern	5	5	5	-	-	2	5	5
+ shadow	5	5	5	-	-	4	4	5
+ globalAlpha	5	5	5	-	-	2	5	5	uupaa(VML)はテキストとシャドーが透過しない
strokeText()	5	5	-	-	-	5	2	2	uupaa(Silverlight)はfillTextとして描画
+ linearGradient	5	-	-	-	-	1	2	2
+ radialGradient	1	-	-	-	-	1	1	1
+ pattern	5	-	-	-	-	1	2	2
+ shadow	5	5	-	-	-	4	2	2
+ globalAlpha	5	5	-	-	-	2	2	2	uupaa(VML)はテキストとシャドーが透過しない
measureText()	5	5	5	-	-	5	5	5
drawImage(image, dx, dy)	5	5	5	5	5	5	5	5
drawImage(image, dx, dy, dw, dh)	5	5	5	5	5	5	5	5
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)	5	5	5	5	5	5	5	5
+ matrix	5	5	5	5	-	5	5	5
drawImage(canvas, dx, dy)	5	5	5	5	-	4	4	4
+ globalAlpha	5	5	5	5	-	-	4	4
+ matrix	5	5	5	5	-	-	-	-
drawImage(canvas, dx, dy, dw, dh)	5	5	5	5	-	4	4	4
+ globalAlpha	5	5	5	5	-	-	4	4
+ matrix	5	5	5	5	-	-	-	-
drawImage(canvas, sx, sy, sw, sh, dx, dy, dw, dh)	5	5	5	5	-	-	4	4
+ globalAlpha	5	5	5	5	-	-	4	4
+ matrix	5	5	5	5	-	-	-	-
createImageData()	5	5	1	-	-	-	-	-
getImageData()	5	5	5	5	-	-	-	-
putImageData()	5	5	5	5	-	-	-	-
createLinearGradient()	5	5	5	5	4	4	4	4	uupaaは中心座標の指定の仕方に制限あり
createRadialGradient()	5	5	4	5	-	4	4	4	uupaaは中心座標の指定の仕方に制限あり, Chromeは内円のサイズが適用されない
createPattern()	5	5	5	5	-	5	5	5

*1: uupaa-excanvas.js extend properties

CanvasRenderingContext2DGame support

Member	F	S	C	O	e	v	a	a3	Notes
getPixel()	-	-	-	5	-	-	-	-	Opera only
setPixel()	-	-	-	5	-	-	-	-	Opera only
checkCollision()	-	-	-	5	-	-	-	-	Opera only
lockCanvasUpdates()	-	-	-	5	-	-	-	-	Opera only
updateCanvas()	-	-	-	5	-	-	-	-	Opera only

opera-2dgameの使い方

<canvas id="canvas" width="300" height="150"></canvas>
<script>
var canvas = document.getElementById("canvas");
var gctx = canvas.getContext("opera-2dgame");
var color = gctx.getPixel(100, 100); // x:100, y:100 のピクセルカラーを取得
alert(color); // rgba(r,g,b,a) か #rrggbb フォーマットの文字列
</script>

詳しくはこちら ⇒ http://my.opera.com/WebApplications/blog/show.dml/200788

CanvasRenderingContext3D support

Member	F	S	C	O	e	v	a	a3
canvas	-	-	-	5	-	-	-	-
CanvasTexture	-	-	-	5	-	-	-	-
color	-	-	-	5	-	-	-	-
fov	-	-	-	5	-	-	-	-
nearPlane	-	-	-	5	-	-	-	-
farPlane	-	-	-	5	-	-	-	-
ztest	-	-	-	5	-	-	-	-
blend	-	-	-	5	-	-	-	-
save()	-	-	-	5	-	-	-	-
restore()	-	-	-	5	-	-	-	-
beginScene()	-	-	-	5	-	-	-	-
endScene()	-	-	-	5	-	-	-	-
translate()	-	-	-	5	-	-	-	-
scale()	-	-	-	5	-	-	-	-
rotateX()	-	-	-	5	-	-	-	-
rotateY()	-	-	-	5	-	-	-	-
rotateZ()	-	-	-	5	-	-	-	-
drawTriangle()	-	-	-	5	-	-	-	-
createTexture()	-	-	-	5	-	-	-	-
create3DModel()	-	-	-	5	-	-	-	-
create3DModel.addVertex()	-	-	-	5	-	-	-	-
create3DModel.addTriangle()	-	-	-	5	-	-	-	-
checkIntersection()	-	-	-	5	-	-	-	-
CanvasTexture()	-	-	-	5	-	-	-	-

間違いがあったら教えてください。
CanvasRenderingContext3D は Operaの実装を元にしました。正式な仕様ではありません。

いま HTML5::Canvas って使えるの? ⇒ まだちょっと早いかも。

ぼちぼち勉強を始めると、他のWeb屋さんに対するアドバンテージを確保できると思いますよ。

HTML5::Canvasは、Safari に実装された機能が元になっています。
困ったときは Safari のレンダリング結果と仕様 http://www.whatwg.org/specs/web-apps/current-work/#the-canvas-element を照らし合わせて確認したほうが良いでしょう。

反省会

Opera には 3D コンテキストよりも、Text API と Shadow API の実装を進めてほしいかも。
一年前に調査した時に比べすごい勢いで実装が進んでいる。
- uupaa-excanvas.js も、5〜6月中に、実装可能な機能を全て実装する予定。
- レガシーなブラウザに対しても prototype ベースでAPIを拡張し、仕事で使えるレベルまでもって行きたい。
  - 話半分でね。

おまけ

Opera や IE で fillText, strokeText を実装した、Canvas.text.js (グリフまわりはtypeface.js) というのもあるのですが、MS ゴシックを typeface.js 用のフォントデータに変換すると、無圧縮の状態で 9〜10MB程になります。日本語環境では絶望的ですね。
# bold や italic も必要なら、サイズは3倍(軽く30MBを超えるフォントデータ)になる。
# 実際に使用する漢字だけをフォントデータ化すればそこまでひどくならないだろうけど、サイト専用のフォントデータを毎回スクラッチするのは辛すぎる。