最初につまづいたやつ。

スマホ向けだとドット絵がよけいに小さく見えるし、

拡大表示させるにはどうすればいいの! っていうのが超悩んだ。

drawImageで毎回拡大させるのも面倒だし、もっと簡単な方法を探してたらCanvasにはサイズが2個あるっぽい。バッファサイズと表示サイズ。
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;

		/*-- 表示倍率(2倍で描画) --*/
		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;

		/*-- 表示倍率(2倍で描画) --*/
		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>

表示結果

これでドット絵もカクカクしたまま拡大表示!

めでたしめでたし。となるまで結構苦労した。

実際のゲームでは表示サイズに画面(ブラウザ)のサイズをセットして、バッファサイズに画面の半分の値を入れることで拡大表示、というやり方をしました。