Skip to content

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

Open
@navadev

Description

@navadev

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:

  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>

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions