### 前提・実現したいこと中身をp5.jsで書いたcanvasをローカルブラウザで表示しています。このcanvasの（描画バッファサイズではなく）表示サイズを大きくしたいのですが、CSSから```#canvas```やp5.js内で設定したID```.mycanvas```をセレクトしてもアクセスできていないようです。何がダメなんでしょうか？ ### 該当のソースコード ```HTML ``` ```JavaScript function setup() { let cnv = createCanvas( 256, 224 ); cnv.id('mycanvas'); //canvasのリファレンスは設定できました } function draw() { background(0); //実際は600行くらいあります } ``` ```CSS @charset "UTF-8"; body {/*効いてる*/ padding: 0; margin: 0; width: 70vw; height: 70vh; } #canvas {/*効いてない*/ height: 70vh; } .mycanvas {/*効いてない*/ height: 70vh; } ``` ### 補足描画バッファサイズもろともJSから変えることはしたくありません。というのも、解像度を下げることで処理を軽くすることを意図しているからです...が、この点についてもツッコミがございましたらお聞かせください。

p5.jsはさっぱりわかりませんが、`createCanvas`したときに直接`style`をつけてるんじゃないでしょうかね。自分で上書きすれば当たりました。 ```js function setup() { let cnv = createCanvas(200, 200); //cnv.id('mycanvas'); cnv.style('height', '70vh'); } function draw() { background(0); rect(50, 50, 100, 100); } ``` どうしてもcssで当てたければ、`important`をつければ当たりました。 ```CSS #defaultCanvas0 { height: 70vh !important; } /* #mycanvas { height: 70vh !important; } */ ```

【p5.js】canvasの表示サイズを変えたい

前提・実現したいこと

中身をp5.jsで書いたcanvasをローカルブラウザで表示しています。
このcanvasの（描画バッファサイズではなく）表示サイズを大きくしたいのですが、CSSから#canvasやp5.js内で設定したID.mycanvasをセレクトしてもアクセスできていないようです。
何がダメなんでしょうか？

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no>
6    <link rel="stylesheet" href="style.css">
7    <script src="../p5.min.js"></script>
8    <script src="../addons/p5.dom.min.js"></script>
9    <script src="sketch.js"></script>
10  </head>
11  <body>
12  </body>
13</html>

JavaScript
1function setup() {
2  let cnv = createCanvas( 256, 224 );
3  cnv.id('mycanvas');　//canvasのリファレンスは設定できました
4}
5
6function draw() {
7  background(0); //実際は600行くらいあります
8}

CSS
1@charset "UTF-8";
2
3body {/*効いてる*/
4    padding: 0; margin: 0;
5    width: 70vw;
6    height: 70vh;
7} 
8#canvas {/*効いてない*/
9    height: 70vh;
10}
11.mycanvas {/*効いてない*/
12    height: 70vh;
13}

補足

描画バッファサイズもろともJSから変えることはしたくありません。というのも、解像度を下げることで処理を軽くすることを意図しているからです...が、この点についてもツッコミがございましたらお聞かせください。

thkana

2021/07/05 22:54

p5.jsはよく知らないので深入りできませんが、Processingではscaleっていう縮小/拡大のスケーリング関数があるので、表示サイズとともにscaleを変更してやれば「描画バッファサイズを変えないで表示サイズを変える」ことができそうな気がしますがいかがでしょう。

helpmeahhhhh

2021/07/06 08:17 編集

回答ありがとうございます。 scale()はp5.jsにもありますが、（単に後に続くpx数値に定数を掛け算するだけで）描画サイズの部分を変えてしまうものだと理解しています。じっさい、draw()の先頭にscale(windowHeight/224);を置いて拡大すると、解像度はバリバリに高まり、小数点の問題と思われる1pxの隙間が発生したりします。あくまで出力はそのままのpx数で行い、表示する側でそれを引き伸ばすことを目指しています。

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

回答1件

ベストアンサー

p5.jsはさっぱりわかりませんが、createCanvasしたときに直接styleをつけてるんじゃないでしょうかね。

自分で上書きすれば当たりました。

js
1function setup() {
2  let cnv = createCanvas(200, 200);
3  //cnv.id('mycanvas');
4  cnv.style('height', '70vh');
5}
6
7function draw() {
8  background(0);
9  rect(50, 50, 100, 100);
10}

どうしてもcssで当てたければ、importantをつければ当たりました。

CSS
1#defaultCanvas0 { height: 70vh !important; } 
2/* #mycanvas { height: 70vh !important; } */

投稿2021/07/06 09:17

編集2023/07/27 16:27

TN8001

総合スコア10220

helpmeahhhhh

2021/07/06 13:14

できました！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！（毎度）ありがとうございます！！！ !important、今後は試してから質問します。。。。。。。。。。。。。。。。。。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.29%

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

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

質問する

前提・実現したいこと

該当のソースコード

補足

関連した質問