p5.js
p5.js copied to clipboard
Published
20 hours ago •
processing
processing
Horizontal overflow when creating canvas with createCanvas(windowWidth, windowHeight)
Most appropriate sub-area of p5.js?
- [ ] Accessibility
- [ ] Color
- [X] Core/Environment/Rendering
- [ ] Data
- [ ] DOM
- [ ] Events
- [ ] Image
- [ ] IO
- [ ] Math
- [ ] Typography
- [ ] Utilities
- [ ] WebGL
- [ ] Build process
- [ ] Unit testing
- [ ] Internationalization
- [ ] Friendly errors
- [ ] Other (specify if possible)
p5.js version
1.9.4
Web browser and version
Firefox 128.0.3 (64-bit), Safari 17.5
Operating system
macOS 14.6
Steps to reproduce this
Steps:
- Create canvas with windowWidth, windowHeight
- Position canvas at top-left of window to fill window with canvas
- Unexpected horizontal overflow occurs (scrollbar)
Snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
margin: 0;
padding: 0;
}
canvas {
position:absolute;
top: 0;
left: 0;
}
#content {
width: 100px;
height: 2000px;
}
</style>
</head>
<body>
<div id="content">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
<script>
function setup() {
createCanvas(windowWidth, windowHeight);
}
</script>
</body>
</html>
Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!
![welcome[bot] avatar](https://avatars.githubusercontent.com/in/4141?v=4 "Published by a pub.dev verified publisher"){kind=small}
1)You might want to add, "overflow - x : hidden" to html, body attributes due to not providing any margin and padding. because we're creating canvas with full window size and not letting out browser resize(add padding, margin on it's own). 2)Another approach is to create a canvas with vh, vw(viewport height, width).
