p5.jsのキャンバスをhtmlのmainタグの幅に合わせる方法

p5.jsのキャンバスをhtmlのmainタグの幅に合わせる方法を教えて下さい。
以下のように、createCanvasにwindowWidth,windowHeightを書いたのですがmainタグの幅に当てはまりません…
どうすれば、canvasの幅をmainに合わせることができるのでしょうか？

html
1コード
2<!DOCTYPE html>
3<html lang="ja">
4
5<head>
6    <meta charset="utf-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1">
8
9    <title>がとらいふ紹介ページ</title>
10
11    <link rel="stylesheet" href="css/normalize.css">
12    <link rel="stylesheet" href="css/style.css">
13        <script src='lib/p5.min.js'></script>
14</head>
15
16<body>
17    <header>
18        <div class="header-logo">
19            <h1>GatoLife</h1>
20        </div>
21        <div class="header-list">
22            <nav>
23                <ul class="clearfix">
24                    <li><a href="index.html" class="btn-flat-vertical-border">Introduce</a></li>
25                    <li><a href="https://note.com/gatolife" target="_blank" class="btn-flat-vertical-border">Note</a></li>
26                    <li class="current"><a href="PArts.html" class="btn-flat-vertical-border">PArts</a></li>
27                </ul>
28            </nav>
29        </div>
30    </header>
31    <main>
32        <h1>Welcome</h1>
33        <ul class="programs">
34            <li><a href="https://editor.p5js.org/gatolifechannel/full/TlfbP-Ewj" target="_blank">https://editor.p5js.org/gatolifechannel/full/TlfbP-Ewj</a></li>
35            <li><a href="https://editor.p5js.org/gatolifechannel/full/jyYIQ2_f4" target="_blank">https://editor.p5js.org/gatolifechannel/full/jyYIQ2_f4</a></li>
36            
37        </ul>
38        <script src='js/sketch.js'></script>
39<!--        <script src='js/test.js'></script>-->
40    </main>
41</body>
42

p5js
1コード
2var x=0;
3var y=0;
4var sp=3;
5
6function setup(){
7    createCanvas(windowWidth, windowHeight);
8    
9}
10
11function draw(){
12  background(0);
13  translate(width/2,25);
14  circle(x,y,50);
15  Sfunction();
16}
17
18function Sfunction(){
19  x+=sp;
20  y=1/100*x*x;
21  if(y>height-50){
22    sp*=-1;
23   var Px=x; 
24    y=1/100*x*x;　
25  }
26  fill(0,255,0);
27  textAlign(CENTER);
28  text("("+int(x)+","+int(y)+")",0,height/2);
29}

行動規範の内容に同意します

回答1件

これで調整できませんか？

js
1function setup(){
2    createCanvas(windowWidth, windowHeight);
3    rectMode(CENTER);
4}

投稿2021/02/16 01:33

phoepsilonix

総合スコア233

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

p5.jsのキャンバスをhtmlのmainタグの幅に合わせる方法

関連した質問