Structure of canvas of p5.js library in html code-CodePudding

This is my HTML CODE. In the script tag, I have defined the canvas width and height but in js or on my chrome page there is no change in the width.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="../p5.min.js"></script>
  <!-- <script text="text/javascript" src="AntSmasher.js"></script> -->

  <script src="https://cdn.jsdelivr.net/npm/p5@1/lib/p5.min.js"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/p5@1/lib/addons/p5.sound.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/planck@latest/dist/planck.min.js"></script> -->
  <script src="https://p5play.org/v3/p5.play.js"></script>

  <script text="text/javascript" src="Insect.js"></script>
  

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
</head>
<body style="background-color:black;">
  <div id="AS"></div>
  <script text="text/javascript" src="AntSmasher.js">
    document.getElementById("AS").style.width=Canvas.width ;
      document.getElementById("AS").style.height=Canvas.height ;
  </script>
</body>
</html>

This is the CSS code where the function of the canvas is defined

canvas{
  padding: 0;
  margin: auto;
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  aspect-ratio: 9/16;
}
.AS{
  height : 100vh;
  aspect-ratio: 9/16;
}

I tried the getElementById method to define the width of js in HTML to make the width and height screen adjustable but couldn't get results as the canvas height and width are not changing. the canvas dimensions in js are 1080x1920.

CodePudding user response：

There are two changes you can make to fix this. The first is to add the correct selector to your stylesheet. You're currently setting styles for a class .AS but the element uses an id. Secondly, the styling for the canvas targets a canvas element, but there are none in the html, just a div. This should work:

<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="../p5.min.js"></script>
  <!-- <script text="text/javascript" src="AntSmasher.js"></script> -->

  <script src="https://cdn.jsdelivr.net/npm/p5@1/lib/p5.min.js"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/p5@1/lib/addons/p5.sound.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/planck@latest/dist/planck.min.js"></script> -->
  <script src="https://p5play.org/v3/p5.play.js"></script>

  <script text="text/javascript" src="Insect.js"></script>
  

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">

   <style>

    canvas {
      padding: 0;
      margin: auto;
      display: flex;
      width: 100%;
      height: 100%;
      position: relative;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      aspect-ratio: 9/16;
    }

    #AS {
      height : 100vh;
      aspect-ratio: 9/16;
    }

  </style>


</head>
<body style="background-color:black;">
  <canvas id="AS"></canvas>
  <script text="text/javascript" src="AntSmasher.js">
    document.getElementById("AS").style.width=Canvas.width ;
      document.getElementById("AS").style.height=Canvas.height ;
  </script>
</body>
</html>

CodePudding user response：

Hello and wish you have fun,

these are my info for my project, so to ArtmySketch.js file I put that iside the script of html with p's everywhere before calling some p5 function. Let me ask you how far you got ...Wish you best

 <head>
   <stlye>
   </style>
 </head>
 <body>
   <main>
      <div id="colorCanvas" class = "container">
        <div id = "AS">
        </div>
      </div>
      <div>
        <img src="./586.png">
      </div>
   </main>
   <script>
        var sketchPink = function(p) {
        p.setup = function() {
          const myPinkCanvas = p.createCanvas(p.windowWidth,p.windowHeight);
          myPinkCanvas.parent("AS");
        }
   </script>
 </body>

and inside and place css

      canvas {
        display: block;
      }

      #colorCanvas {
        margin: 0 auto;
      }

Also there is something like p.windowResize when resizing your window. Thanks