canvas要素の高解像度対応状況を調査

canvas要素の高解像度対応状況を調べるめに、冒頭で紹介した61コンテンツの全ソースコードを解析し、高解像度ディスプレイを搭載したMacBook Pro RetinaDisplayモデルで目視確認をしました。

160219_desktop_retina_investigation

すると、canvas要素を使っている61件コンテンツの中で20件、33%のサイトが高解像度の対応をしていることがわかりました。FWAでピックアップされているサイトでは、canvas要素の高解像度対応をしつつあることがわかります。

160219_desktop_retina_canvas_ratio

また、WebGLを使ったコンテンツの方が高解像度対応率がやや高い結果となりました。

160219_desktop_retina_vs_webgl

高解像度対応の手法は同じだった

興味深いことに、20件のコンテンツの高解像度対応手法は全て同じでした。

  1. canvas要素のwidth属性とheight属性をデバイスピクセル比devicePixelRatio(※)分だけ拡大する。
  2. canvas要素のstyle属性のwidthheightをデバイスピクセル比分だけ縮小する。

canvas要素の高解像度対応の方法が全て同じだったので、これが標準的な手法と言えるでしょう。ちなみにこれは高画質の画像を作成し、img要素を半分の大きさに縮小するという画像の高解像度対応と似た考え方です。

※ デバイスピクセル比とは、1ピクセルをデバイスの何ピクセルで表示するかを示した数値です。例えばMacBook Pro Retinaディスプレイの場合は「2」です。詳しくは記事「 いまさら聞けないRetina対応のための「ピクセル」の話 – Rriver」を参照してください。

160219_desktop_retina_howto

▲ デバイスピクセル比が「2」だった場合の高解像度対応の様子。

高解像度対応のデモ

高解像度対応の手法をテストするためのデモを作成しました。canvas要素を2つ並べています。左側のcanvas要素に対して前述の高解像度対応を行っています。

MacBook Pro Retinaディスプレイで閲覧したキャプチャー画像が以下です。高解像度対応をした左側のcanvas要素の方だけがボケずに表示されます。なお、高解像度でないディスプレイで閲覧した場合は見え方の違いはほぼありません。

160219_desktop_retina_capture

高解像度対応のJavaScriptのコードは下記です。

 
var myCanvas = document.getElementById("myCanvas"); 

// 1. canvas要素のwidth属性とheight属性をdevicePixelRatio分だけ拡大する。
myCanvas.width *= devicePixelRatio;
myCanvas.height *= devicePixelRatio;

// 2. canvas要素のstyle属性のwidthとheightをdevicePixelRatio分だけ縮小する。
myCanvas.style.width = String(myCanvas.width / devicePixelRatio) + "px";
myCanvas.style.height = String(myCanvas.height / devicePixelRatio) + "px";

デスクトップのcanvas要素の高解像度対応をするべき時代に

本記事で伝えたかったことは3つです。

  1. 高解像度ディスプレイのデスクトップが増えているため、デスクトップのcanvas要素の高解像度対応が必要となってきた。
  2. FWAでピックアップされているサイトでは3割ほどが対応済み。
  3. canvas要素を高解像度対応する標準的な方法は、2倍サイズのコンテンツを作って半分に縮小すること。

デスクトップでcanvas要素を使用する際の参考になれば幸いです。