最初につまづいたやつ。
スマホ向けだとドット絵がよけいに小さく見えるし、
拡大表示させるにはどうすればいいの! っていうのが超悩んだ。
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>
表示結果

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