search

processing / p5.js

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —
http://p5js.org/
GNU Lesser General Public License v2.1
21.45k stars 3.29k forks source link

Horizontal overflow when creating canvas with createCanvas(windowWidth, windowHeight) #7156

Open navadev opened 1 month ago

navadev commented 1 month ago

Most appropriate sub-area of p5.js?

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:

  1. Create canvas with windowWidth, windowHeight
  2. Position canvas at top-left of window to fill window with canvas
  3. Unexpected horizontal overflow occurs (scrollbar)

Screenshot 2024-07-31 at 10 25 30 AM

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[bot] commented 1 month ago

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!

moiz2405 commented 1 month ago

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).