# How to set canvas size to 100% of a container div?
**URL:** https://discourse.processing.org/t/how-to-set-canvas-size-to-100-of-a-container-div/18734
**Category:** Coding Questions
**Created:** [March 17, 2020, 2:16pm UTC](https://discourse.processing.org/t/how-to-set-canvas-size-to-100-of-a-container-div/18734 "2020-03-17T14:16:38Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@spoke123](https://discourse.processing.org/u/spoke123)
#### Post date: [March 17, 2020, 2:16pm UTC](https://discourse.processing.org/t/how-to-set-canvas-size-to-100-of-a-container-div/18734/1 "2020-03-17T14:16:38Z")
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!
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [March 17, 2020, 9:31pm UTC](https://discourse.processing.org/t/how-to-set-canvas-size-to-100-of-a-container-div/18734/2 "2020-03-17T21:31:30Z")
Responsive resizing is still too complex to me, so I can’t help out much. 😖
But just to get you started, I’ve got this little [**windowResized()**](https://p5js.org/reference/#/p5/windowResized) excerpt based on [**getComputedStyle()**](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle):
```javascript
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);
}
```
> **[CSS Properties Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference)**
>
> The following is a basic list of the most common CSS properties with the equivalent of the DOM notation which is usually accessed from JavaScript:
---
### Author:  [@spoke123](https://discourse.processing.org/u/spoke123)
#### Post date: [March 17, 2020, 10:07pm UTC](https://discourse.processing.org/t/how-to-set-canvas-size-to-100-of-a-container-div/18734/3 "2020-03-17T22:07:16Z")
Thanks very much! This looks promising, I’ll give it a go tomorrow and report back!
---
### Author:  [@spoke123](https://discourse.processing.org/u/spoke123)
#### Post date: [March 18, 2020, 3:52pm UTC](https://discourse.processing.org/t/how-to-set-canvas-size-to-100-of-a-container-div/18734/4 "2020-03-18T15:52:29Z")
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:
```auto
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:
```auto
```
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.
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.
---
### Author:  [@spoke123](https://discourse.processing.org/u/spoke123)
#### Post date: [March 18, 2020, 7:25pm UTC](https://discourse.processing.org/t/how-to-set-canvas-size-to-100-of-a-container-div/18734/5 "2020-03-18T19:25:13Z")
Found the solution thanks to [Rabbit76](https://stackoverflow.com/questions/60743491/how-to-position-a-p5-js-canvas-inside-a-div-container/60745572#60745572) on stackoverflow!
In function setup(), replace:
```auto
createCanvas(sketchWidth, sketchHeight);
```
with:
```auto
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](http://p5js.org/reference/#/p5/createCanvas)
p5js /reference/#/p5.Renderer
p5js /reference/#/p5.Element/parent
---
### Author:  [@patricio1979](https://discourse.processing.org/u/patricio1979)
#### Post date: [July 1, 2021, 1:42pm UTC](https://discourse.processing.org/t/how-to-set-canvas-size-to-100-of-a-container-div/18734/6 "2021-07-01T13:42:51Z")
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?