拡大されたcanvasでピクセルを綺麗に表示させたい時にCSSがいい感じだった

自分はピクセルなレトロなゲームみたいなものをCanvasで描画した。

小さいのでscaleで二倍にする

やってみたけど128pxは小さいので256pxしたいな～と思ってこのようにする。
(最低限に抜粋)

HTML

<canvas width="256" height="256"></canvas>

CSS

canvas{
    image-rendering: pixelated;
}

JS

ctx.scale(2, 2);

しかしscaleはガビガビ

しかしこのようにしてピクセルな画像を表示したら
なんかピクセルがガビガビになった。

そんな時にCSS

こんな風にしたら、ピクセルが綺麗なまま2倍に拡大できた。

HTML

<canvas width="128" height="128"></canvas>

CSS

canvas{
    image-rendering: pixelated;
    width: 256px;
    height: 256px;
}

JS

// ctx.scale(2, 2);

まとめ

canvasでピクセルが重要なレトロなものを拡大して描画したい場合、ctx.scale(2, 2)ではなくCSSでwidth: calc(横サイズ * 2px); height: calc(縦サイズ * 2px);(暗算も可)とすると綺麗。
HTMLのcanvasのサイズはJavaScriptのコンテキストで扱うサイズのままにする

なお一般的にはcanvas+CSSはよくないとされている。