描画能力が大幅に向上、Flashに匹敵するアニメーションも可能に
膨大な数の仕様で構成されるHTML5は幅広い意味を持ち、一言で定義するのは難しいが、紀平氏はセッションの冒頭で「今回はスマートフォンの話に限定する（PCブラウザに関しては触れない）」と断ったうえで、次のように述べた。
「HTML5はHTMLとJavaScriptの複合体。それ自体はHTML4と大きく変わっているわけではない。もっとも重要な違いは、今までに比べてAPIが非常に豊富になったこと」
この豊富なAPIにより、HTML5では描画能力が大きく向上している。例えば、Canvasを使えばドット単位の描画が可能であり、ベクターグラフィックスを扱えるSVGによって曲線のある図形も描画できる。さらに、アニメーションもFlash並のクオリティが実現できるようになった。
ここで紀平氏は、同じ内容のアニメーションを2つの画面で同時に再生するデモを実施。一方はFlash、もう一方はHTML5で作成されたものだが、実際に会場のスクリーンで見ても見分けがつかなかった。しかし、HTML5は「残念ながらアプリ（ネイティブアプリケーション）に敵わないところもある」と紀平氏は続け、劣っている点として「3D」「音楽」「速度」の3つを挙げた。
まず3Dについては、スマートフォン標準搭載のブラウザでOpenGLが利用できないという制約がある。現時点でOpenGLをHTML5で使うための規格であるWebGLをサポートしているのは、Android用のFirefox for mobileのみだ（※注意）。音楽についても、音のタイミング調整が非常にシビアであるため「音ゲー」などに使うのは難しいという。ほかにも、画面タッチのタイミングでのみ音楽再生が可能（iPhone）、同時に2つの音源を鳴らせない（iPhone、WindowsPhone）など、制限が多い。そして、速度については、描画（レンダリング）の遅さ、JavaScript実行の遅さという、2つの問題を抱えている。
講演後の2月27日、Opera mobileもWebGLに対応しました。
続いて紀平氏は、描画手段の使い分けについて説明した。HTMLの描画手段としては、Canvas（ラスターグラフィックス）、SVG（ベクターグラフィックス）、CSS3（変形やアニメーション）の3つがあるが、このうちSVGはAndroid 2系でサポートされていないため、CanvasとCSS3の2つを取り上げた。ちなみに、SVGは工夫すればCanvasで代用可能だという。
「これまでの経験から、CanvasはAndroidで速度が問題になることはほとんどない。そのため、基本的にiPhoneでのfpsを上げることを考えて開発している。特に、iOS4ではdrawImageが遅いので、オンメモリのCanvasを利用してキャッシュに載せ、いかにdrawImageの回数を減らすかが重要」（紀平氏）
iOS5ではGPUのサポートが入ったことで、drawImageの重さが解消されてかなり速くなったが、別のAPIで重くなっているものもある。その回避のためには、やはりオンメモリのCanvasを利用するのが有効だ。
また、意外と見過ごされがちなこととして、紀平氏は「DOM構造でCanvasの上にさらにDOM要素を載せると重くなる。できるだけCanvasですべて処理して、DOM要素を上に載せないようにするべき」と指摘した。
紀平氏によると、Canvasは「じゃじゃ馬」のようなもので、特性を理解して使いこなせば優秀だが、それまでが大変なのだそうだ。一方、CSS3については「悪女」と表現した。そのココロは「とっつきやすいが、いきなり裏切る」というもの。
「CSS3はGPUサポートがあるので、最初はサクサク動作するが、同時に動く物体数が増えると急激に重くなる。そのため、デモでは快適に動いていたのが、ある日突然、使い物にならないほど重くなるようなことも起こりがち」（紀平氏）
また、CSS3は、特にAndroidでブラウザや端末間での互換性がないことが多い。変形の機能ではある程度の互換性が期待できるものの、アニメーションの機能についてはトラブルが散見されるという。こうした特性から、「シチュエーションに応じて変わるゲーム的なアニメーションや、同時に動くものが多いときはCanvas、1枚もののアニメーションで同時に動くものが少ないときはCSS3」（紀平氏）といった使い分けが効果的だ。
