Canvas 2D APIの新機能案がアツい

現在提案されているCanvas 2D APIの新機能案がおもしろいので、今更ながら本提案の概要と気になっている機能をさくっとまとめておきます。

概要

今より簡単に、よりリッチな表現をCanvas 2D APIで可能にするための提案で、9つの機能が提供される予定です。

2019年11月にWICGへ投稿された「Proposal: updates for Canvas2D API」が初出のようですが、去年開催されたChorome Dev Summitの紹介によって認知された方が多いのではないでしょうか。Chorome Dev Summit内でも語られていましたが、すでにGoogle Chromeではフラグ（Experimental canvas 2D API features）を有効化することで各種機能を試すことができます。

以下は、各種機能名およびそれの簡易的な説明です。

• Canvas context loss： ページがバックグラウンドにある時などに、Contextを破棄してリソースを開放するための機能および破棄後にContextを再構築するための機能
• willReadFrequently： Canvasの画像データを頻繁に読み取ることを明示的にすることでブラウザにヒントを送り、データ読み取り時のパフォーマンスを最適化する機能
• Color input： CSSColorValue objectsを使った色の指定を可能にする機能
• Text modifiers： CSSで使用できるletter-spacingやfont-stretchといった機能をCanvas 2D API上で利用可能とする機能
• Reset function： Canvasの状態（pathやtransformなど）をリセットする機能
• RoundRect： 角丸な長方形を描画する機能
• Perspective transforms： 遠近感のある物体を描画できるようになる機能
• Conic Gradient. 円錐形のグラデーションを作るための機能
• Modern filters： Canvas上でSVGフィルターを使うための機能

いずれも、以下の3つの軸で提案されているものとなっており、今までの慣例じみた実装をいい意味で破壊してくれるのではと期待しています。

1. 世に出回っているライブラリを参考にして、需要の高い2D API群と同等の機能を提供
2. 現在のCSSが持つ機能へのアクセス
3. パフォーマンス改善

気になっている機能

Reset function

逆になんでいままで存在しなかったのかおかしいぐらいの機能だと思っています。
この機能が追加されることで、canvasの状態を初期化する際のcanvas.width = canvas.widthやctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)といった記述がctx.reset()に統合されます。

Canvas 2D APIを普段から使っていない人からすれば、普通に考えてcanvas.width = canvas.widthとか謎でしかないですもんね。

RoundRect

個人的に大本命の機能です。 というのも今まではCanvas 2D APIで角丸の長方形を描画しようと思ったら以下のように複数行のコードを書く必要があり、記憶的負荷やパフォーマンス負荷が多少なりともかかっていました。

ctx.beginPath();
ctx.moveTo(left + radius, upper);
ctx.lineTo(left + width - radius, upper);
ctx.arcTo(left + width, upper, left + width, upper + radius, radius);
ctx.lineTo(left + width, upper + height - radius);
ctx.arcTo(
  left + width,
  upper + height,
  left + width - radius,
  upper + height,
  radius
);
ctx.lineTo(left + radius, upper + height);
ctx.arcTo(left, upper + height, left, upper + height - radius, radius);
ctx.lineTo(left, upper + radius);
ctx.arcTo(left, upper, left + radius, upper, radius);
ctx.fill();

それが、今後はctx.fillRoundRect(x, y, w, h, radius)の1行で済むようになるのです。
これにより、先述した負荷軽減ならびにコードの可読性を著しくあげることができます。

Element as a source for drawImage

今回提供が予定されている機能の中には含まれていませんが、アイデアとして「Element as a source for drawImage」という機能が挙げられています。
img要素やvideo要素以外のHTML要素をソースとして描画できる機能だと認識しているのですが、これが実装されればhtml2canvasなどに依存することなく簡単に要素を基点としたのWebページのキャプチャが撮れることになります。
後発ということもあるので、html2canvasなどで正常に認識できないスタイル（CSSプロパティ）の認識が可能であったり、その他ユーザーが求めている機能群を盛り込んだAPIが追加されるのではと予想しています。

私の場合、Webアプリ開発時にページのキャプチャを撮りたいと思うことが往々にしてありますので、この機能を先んじて各ブラウザベンダーに実装してもらえると嬉しかったりします。

おわりに

さまざまな有用機能が追加される一方で、canvas要素を使用する時の懸念点となりやすいa11yの改善案が1つもなく、少し残念な気持ちになりました。
ですが、新機能が追加されること自体は非常に喜ばしいことなので、今後もよりよいアップデートがあることを期待して末長く動向を追っていければと思っています。