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.