Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

背景

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.

hashito
わたしです。 主に個人的なメモです。
https://hashito.biz/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away