canvasを画面比に応じて可変にする(canvasでお絵かきアプリ)

背景

canvasを画面サイズに応じて可変させたい。
純粋にそのまま実行するとjavascriptにて操作するときにcssで書いた値は有効にならず、「幅300px 高さ150px」という認識で動くのです…

結論

回避策としては下記…

window.onresize =//<- resize時も対応
window.onload  = function() {
var cnv=document.getElementsByClassName('cnv')[0];
var ctx=cnv.getContext('2d');
cnv.setAttribute('width',cnv.clientWidth);  //<- sizeを教えてあげる
cnv.setAttribute('height',cnv.clientHeight);//<- sizeを教えてあげる

var p=false;
cnv.addEventListener('mousemove', (e)=>{
  console.log(e.which,cnv);
  if(e.which==1){
    if(!p){
      ctx.beginPath();
      ctx.strokeStyle="#fff";
      ctx.moveTo(e.x, e.y);
      p=true;
    }else{
      ctx.lineTo(e.x, e.y);
      ctx.stroke();
    }
  }else{
    p=false;
  }
});
};

属性として書き込んであればそれをもとに動くようです。

追加

表記の機能を利用して簡単なお絵描きキャンバスを実装したので、ここに共有させていただきます…
消しゴム・色選択・ペンサイズ変更は実装済みです。

See the Pen canvas by hashito (@hashito) on CodePen.