HTML5 CanvasのdrawImageでアンチエイリアスを適用する方法

アンチエイリアスの基本：リサンプリング品質を設定する

HTML5のCanvasで画像を拡大・縮小して描画する際、輪郭がギザギザになる（ジャギーが発生する）ことがあります。これを防いで滑らかな描画結果を得るには、2DコンテキストのimageSmoothingQualityプロパティでリサンプリング品質を指定します。「low」「medium」「high」の3段階から選択でき、「high」ほど高品質な補間が行われます。

ctx.imageSmoothingQuality = "low" | "medium" | "high";

オフスクリーンキャンバスによる段階的な縮小

より高品質な縮小を実現したい場合は、オフスクリーンキャンバス（画面に表示されない作業用キャンバス）を活用し、画像を一度に縮小せず半分ずつ段階的に縮小していく手法が有効です。一気に縮小する場合と比べて、ピクセル情報がより丁寧に処理されるため、ジャギーやモアレが目立ちにくくなります。

まず、元画像の半分のサイズを持つオフスクリーンキャンバスを作成し、そこへ画像を描画します。

var c = document.createElement('canvas'),
    ocx = c.getContext('2d');
c.width = img.width * 0.5;
c.height = img.height * 0.5;

ocx.drawImage(img, 0, 0, c.width, c.height);

さらに縮小が必要な場合は、この処理を繰り返します。すでに半分になったキャンバスを入力として使い、またその半分のサイズへ描画していきます。

// 半分に縮小した画像を、さらに半分へ縮小して描画
ocx.drawImage(c, 0, 0, c.width * 0.5, c.height * 0.5);

実装のポイント

• imageSmoothingEnabledはtrueのままにする：平滑化を無効化すると逆にジャギーが強調されるため、通常は有効のまま品質だけ調整します。
• 50%刻みの縮小が効果的：各ステップで面積が1/4になるため、ブラウザの補間アルゴリズムが最もきれいに働きます。
• 目的のサイズに近づいたら仕上げ：段階的縮小で目標サイズ付近まで減らし、最後の1回だけ目的の寸法へ描画すると効率的です。

このようにimageSmoothingQualityの設定と段階的縮小を組み合わせることで、Canvas上でもサムネイル生成などにおいて高品質なアンチエイリアス済み画像を得ることができます。