1

When creating a fillwidth p5 cnavas, i get some weird border around the edge. How do i get rid of this? Or more precisely what might cuase such an issue.

        var sketch = function (p) {
          with(p) {

            p.setup = function() {
              createCanvas(window.innerWidth, 400);
            };
        
            p.draw = function() {
              if (mouseIsPressed) {
                  fill(0);
                  ellipse(mouseX, mouseY, 80, 80);
              }
            };
            
          }
        };
        
        let node = document.createElement('div');
        window.document.getElementById('p5-container').appendChild(node);
        new p5(sketch, node);
body {
  background-color: lightgrey;
  overflow: hidden;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
    <div id="p5-container"></div>
<div id="conatiner">
    <h1>My Website</h1>
    <h2>It is all coming together.</h2>
</div>

It sadly looks like this: The broken positioning of my canvas

Dominique Fortin
  • 2,212
  • 15
  • 20
Clebo Sevic
  • 581
  • 1
  • 7
  • 17
  • 2
    `body { margin: 0; }` is a typical [reset](https://stackoverflow.com/questions/11578819/css-reset-what-exactly-does-it-do). – ggorlen Aug 22 '20 at 21:39
  • Please make it an answer. I would love to accept it, it works perfectly. – Clebo Sevic Aug 22 '20 at 21:42
  • No no, your first one answered it. I just wanted you to make it a official answer to my post, so i can make it a checked answer. – Clebo Sevic Aug 23 '20 at 00:30
  • 2
    Thanks for the offer and that's usually the right idea, but in this case it's a pretty clear duplicate, so the best way to keep the resource accessible to future visitors is to consolidate the post to the canonical one with the most answers/views. The accepted answer in the link is identical to what I wrote above and they have fundamentally the same problem as you. – ggorlen Aug 23 '20 at 00:44

0 Answers0