最初につまづいたやつ。
スマホ向けだとドット絵がよけいに小さく見えるし、
拡大表示させるにはどうすればいいの！ っていうのが超悩んだ。
drawImageで毎回拡大させるのも面倒だし、もっと簡単な方法を探してたらCanvasにはサイズが２個あるっぽい。バッファサイズと表示サイズ。
CSSでwidth, heightを指定すると表示サイズとして使われてCanvasのwidth, heightはバッファサイズとして使われるそう。
てことは、Style属性に大きい値を入れれば拡大表示できるってことが言えるわけ！
出来上がったコードがこれ（失敗作）
<script type="text/javascript" language="javascript">
window.onload = function()
{
/*-- 描画バッファサイズ 縦100×横100 --*/
let base_width = 100,
base_height = 100;
/*-- 表示倍率（２倍で描画） --*/
let SCALE = 2;
/*-- 表示上のCanvasサイズ --*/
let Disp_Width = base_width * SCALE, /* バッファサイズ×表示倍率 */
Disp_Height = base_height * SCALE; /* バッファサイズ×表示倍率 */
let canvas = document.getElementById( "SampleCanvas" );
/*-- Canvasのサイズ設定 --*/
canvas.width = base_width; //Canvasのwidth属性にはバッファサイズをセット
canvas.height = base_height; //Canvasのheight属性にはバッファサイズをセット
canvas.style.width = Disp_Width; //Style要素のheightには表示サイズをセット
canvas.style.height = Disp_Height; //Style要素のheightには表示サイズをセット
let ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false; //←最初はこれでいけるとおもってた
/* canvasサイズ分ぬりつぶし */
ctx.fillStyle = "#eeeeee";
ctx.fillRect( 0, 0, canvas.width, canvas.height );
/* まんなかに□ */
ctx.fillStyle = "#000000";
ctx.strokeRect( 25, 25, 50, 50 );
};
</script>
</head>
<body>
<canvas id="SampleCanvas" />
</body>表示結果
等倍だとこうなので
一応拡大表示はできてたものの……。
どう見てもぼやけてる！
で、また調べてみたら、CSSで「image-rendering: pixelated」を指定するといいってことでした（Chromeの場合）。困ったらCSS！
今度こそ完成したコード
<html>
<head>
<style>
canvas { border: 0;
image-rendering: -moz-crisp-edges; /* Firefox用 */
image-rendering: pixelated; /* Chrome用 */
}
</style>
<script type="text/javascript" language="javascript">
window.onload = function()
{
/*-- 描画バッファサイズ 縦100×横100 --*/
let base_width = 100,
base_height = 100;
/*-- 表示倍率（２倍で描画） --*/
let SCALE = 1;
/*-- 表示上のCanvasサイズ --*/
let Disp_Width = base_width * SCALE, /* バッファサイズ×表示倍率 */
Disp_Height = base_height * SCALE; /* バッファサイズ×表示倍率 */
let canvas = document.getElementById( "SampleCanvas" );
/*-- Canvasのサイズ設定 --*/
canvas.width = base_width; //Canvasのwidth属性にはバッファサイズをセット
canvas.height = base_height; //Canvasのheight属性にはバッファサイズをセット
canvas.style.width = Disp_Width; //Style要素のheightには表示サイズをセット
canvas.style.height = Disp_Height; //Style要素のheightには表示サイズをセット
let ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false; //←最初はこれでいけるとおもってた
/* canvasサイズ分ぬりつぶし */
ctx.fillStyle = "#eeeeee";
ctx.fillRect( 0, 0, canvas.width, canvas.height );
/* まんなかに□ */
ctx.fillStyle = "#000000";
ctx.strokeRect( 25, 25, 50, 50 );
};
</script>
</head>
<body>
<canvas id="SampleCanvas" />
</body>
</html>表示結果
これでドット絵もカクカクしたまま拡大表示！
めでたしめでたし。となるまで結構苦労した。
実際のゲームでは表示サイズに画面（ブラウザ）のサイズをセットして、バッファサイズに画面の半分の値を入れることで拡大表示、というやり方をしました。