Canvasの補間を無効に

横スクロールアクションゲームの制作中。
今回利用しようとしているアセットはドット絵タイプのものなのだが、1つのチップサイズが思ったよりも小さくて見づらいので2倍に拡大して表示することにした。
ただ、表示してみたら、補間によってぼやけたドットになってしまう。
そこで補間しないように設定した。
HTMLのCanvasの2Dコンテキストの imageSmoothingEnabled を false に設定。

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.imageSmoothingEnabled = false;

ctx.drawImage(img, 0, 0, 32, 32, 0, 0, 128, 128);

これで補間されず、ドット絵に向いた表示にできた。