Canvasの解像度

https://codepen.io/mo4_9/pen/eRYRRZ

解像度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