HTML5でドット絵を拡大する

ぼやけない１ピクセルを実現するために

関心が高い方なら、2013年6月9日に投稿されたWEB上でドット絵を拡大表示する - @wizforestを、既に試されたと思う。この記事の結論はこうだ。canvas要素にJavaScriptで描写すれば可能である。その方法は、この記事内のスクリプトか、筆者の拙作を参考にして欲しい。

新しい問題

canvas要素は、style属性やcssのwidthプロパティなどで更に拡大できるが、上記の画像のように拡大時はジャギーが劣化する。ドット絵がドット絵たるアイデンティティを失ってしまうのだ。これは恐ろしい。

ジャギーを殺さない方法

ピクセルをpath要素に変換してsvgで保存することで、ピクセルは色を持つ正方形として、形を維持して拡大する。path要素に変換するには、d属性を使う。例えば、黒の1pixelの画像ファイルは、以下のように表現できる。

<svg viewBox="0 0 1 1" shape-rendering="crispEdges">
  <path d="M0,0h1v1h-1Z" fill="rgba(0,0,0,1.00)"></path>
</svg>

以上のコードをhtmlファイルとして保存すれば、ブラウザで開くと画面の幅いっぱいに、黒い正方形が表示される。

style属性か、cssでwidthプロパティを指定すれば、アスペクト比を維持したまま拡大・縮小できる。

ライブラリ化

以上を手作業でやると骨が折れて複雑骨折するので、jaggy.jsをgitにアップロードした。
楽しいドット絵ライフを。