How to set canvas size to 100% of a container div?

p5.js Coding Questions
1

Hi everyone!

How could I go about setting my canvas size to be 100% width and height of its container div, so that I could position and scale the sketch via the div with CSS and have it react to window size adjustment? I’m trying to avoid hardcoding pixel values as much as possible.

Thanks very much!

2 Likes
2

Responsive resizing is still too complex to me, so I can’t help out much. :confounded:

But just to get you started, I’ve got this little windowResized() excerpt based on getComputedStyle():

function windowResized() {
  const css = getComputedStyle(canvas.parentElement),
        marginWidth  = round( float(css.marginLeft) + float(css.marginRight)  ),
        marginHeight = round( float(css.marginTop)  + float(css.marginBottom) ),
        w = windowWidth - marginWidth, h = windowHeight - marginHeight;

  resizeCanvas(w, h, true);
}
2 Likes
3

Thanks very much! This looks promising, I’ll give it a go tomorrow and report back!

4

I’ve now managed to get the canvas size to react to its parent div container size using document.getElementById("divName").offsetWidth and offsetHeight but I haven’t managed to work out why it is not sharing its position so far. Here’s a simplified version of my app.

p5.js:

var sketchWidth;
var sketchHeight;

function setup() {
  sketchWidth = document.getElementById("square").offsetWidth;
  sketchHeight = document.getElementById("square").offsetHeight;
  createCanvas(sketchWidth, sketchHeight);
}

function draw() {
  background(0,0,255);
}

function windowResized() {
  sketchWidth = document.getElementById("square").offsetWidth;
  sketchHeight = document.getElementById("square").offsetHeight;
  resizeCanvas(sketchWidth, sketchHeight);
}

HTML:

<html>
  <body>
    <div id="squareContainer">
      <div id="square">
        <script src="libraries/p5.min.js"></script>
        <script src="square.js"></script>
      </div>
    </div>
  </body>

  <style>
    body {
      background-color: black;
    }

    #squareContainer {
      display: flex;
      width: 50%;
      height: 50%;
      margin: 0 auto;
      background-color: white;
    }

    #square {
      box-sizing: border-box;
      width: 80%;
      height: 80%;
      margin: auto;
      background-color: red;
    }
  </style>
</html>

And here is a screenshot of what I’m currently rendering. As you can see, the blue square (my p5.js code) has the same dimensions as the red square (the div) but I would like it to also be overlapping at the same position.

sketchscreen
sketchscreen894×926 1.43 KB

Sorry if I am straying too far into a CSS question rather than a p5.js question at this point, let me know if I should try to ask on another forum! Thanks very much for any help.

2 Likes
5

Found the solution thanks to Rabbit76 on stackoverflow!

In function setup(), replace:

createCanvas(sketchWidth, sketchHeight);

with:

  let renderer = createCanvas(sketchWidth, sketchHeight);
  renderer.parent("square");

Where “square” was the name of the parent div - check my HTML for reference.
Hope this helps someone in my situation in future!

Helpful links for further info (I can only link one because I’m new here):

p5js.org/reference/#/p5/createCanvas
p5js /reference/#/p5.Renderer
p5js /reference/#/p5.Element/parent

1 Like
6

Sorry for late response, is there a way to get pixel colors from the div HTML element?
I found out that if you resize canvas the function get or pixels doesn’t work. Perhaps is the same here?