imageSmoothingQuality は imageSmoothingEnabled が true のときに使う

imageSmoothingQuality を指定する場合は、imageSmoothingEnabled の値も確認する。前者の設定が効果を持つには、後者が true である必要がある。

MDN では imageSmoothingQuality は対応が限られる機能として案内されている。利用するブラウザーでの対応を確認し、設定できることだけで出力結果まで同じになるとは判断しない。

次の例は、ctx が有効な 2D コンテキストで、image のデコードが完了している場合の描画前設定である。

ctx.imageSmoothingEnabled = true;
if ('imageSmoothingQuality' in ctx) {
  ctx.imageSmoothingQuality = 'high';
}
ctx.drawImage(image, 0, 0, 160, 120);

設定を比較する場合は、入力画像と描画サイズをそろえる。設定後に描き直した結果を、実際に使うプレビューサイズで確認する。機能の存在を検査した後も、必要な見た目になったかを確認する。

参照：MDN imageSmoothingQuality。