解像度2倍
= 750pxのcanvasをつくって、375pxで表示
canvas.width = 750px
ctx.scale(2,2);
canvas.style.width = 375px
となればいい。
const dpr = window.devicePixelRatio || 1;
function onWindowResize() {
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width * dpr;
canvas.height = height * dpr;
ctx.scale(dpr,dpr);
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
}
canvasが重くなければ、
const dpr = window.devicePixelRatio || 1;
で解像度ぴったりのcanvasを描画
逆にcanvasが重い場合は、
dpr = 0.5
などで強制的に解像度を下げる。
参考
https://codepen.io/mo4_9/pen/LyXzob
http://dotinstall.com/lessons/basic_canvas_v2/39905