Horizontal overflow when creating canvas with createCanvas(windowWidth, windowHeight)
Open
Nobody has claimed this yet.
Area:Core
Bug
- Dominant language
- JavaScript
- Stars
- 24k
- Forks
- 3.8k
- Avg merge
- 3d 16h
- Merged PRs (30d)
- 25
Description
Most appropriate sub-area of p5.js?
- Accessibility
- Color
- 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>
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the HTML and createCanvas(windowWidth, windowHeight) snippet in the reported browsers, then trace the canvas sizing and positioning behavior in p5.js. Done means a canvas filling the window at the top-left no longer creates unexpected horizontal overflow.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- computer-graphics, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100