title: P5 image not rendering
body: <p><strong>Edit : See what I did wrong at the end of the post</strong></p>
  <p>I'm new to P5.js and I'm trying to load images following the P5 reference.
  I'm using a local node http-server without cache saving.
  Here is the structure of my project :</p>
  <p><a href="https://i.stack.imgur.com/7rvVX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7rvVX.png" alt="enter image description here" /></a></p>
  <p>I believe it is not relevant to show the Controls, Factory, Hive, Bee javascript files as they are not using any P5 related code.</p>
  <p>Here is my &quot;main&quot; code :</p>
  <pre><code>const ctrls = new Controls();
  const fctry = new Factory();
  
  const wH = window.innerHeight;
  const wW = window.innerWidth;
  
  var sprites = {};
  
  function preload() {
      sprites = {
          &quot;hive&quot;: {
              &quot;image&quot;: loadImage('./images/hive.png'),
              &quot;size&quot;: 128,
          },
          &quot;blue_flower&quot;: {
              &quot;image&quot;: loadImage('./images/blue_flower.png'),
              &quot;size&quot;: 25,
          },
          &quot;red_flower&quot;: {
              &quot;image&quot;: loadImage('./images/red_flower.png'),
              &quot;size&quot;: 25,
          },
          &quot;bee&quot;: {
              &quot;image&quot;: loadImage('./images/bee.png'),
              &quot;size&quot;: 20
          }
      }
  }
  
  var to_display = [];
  
  function setup() {
      createCanvas(wW, wH);
  }
  
  function draw() {
      background(220);
      for (obj of to_display) {
          //e.g Hive : obj.getSprite() = &quot;hive&quot;, obj.getPos = {x: 500, y: 500}
          image(sprites[obj.getSprite()].image, obj.getPos().x, obj.getPos().y);
      }
  }
  
  function mouseClicked(e) {
      if (e.target.id == &quot;container&quot;) {
          let selected_object = ctrls.get_selected_to_place();
          to_display.push(fctry.createObject(selected_object, 500, 500));
          console.log(&quot;to_display :&quot;, to_display);
      }
  }
  </code></pre>
  <p>So, basically, upon click, I'm creating an object that I wish to render and store it in <code>to_display</code>.</p>
  <p>In the draw function, I'm iterating on all object and try to display them.
  However, not a single image appears, there's no warning / errors in browser console or in server logs. No CORS warning. Both on Firefox and Chrome</p>
  <p>I've tried making 4 different global variable to store my images, like so :</p>
  <pre><code>var hive;
  
  function preload() {
      hive = loadImage('./images/hive.png');
  }
  
  function draw() {
      image(hive, 200, 200, 128, 128);
  }
  </code></pre>
  <p>I've also tried to use http location for my images, like so :</p>
  <pre><code>sprites = {
      &quot;hive&quot;: {
          &quot;image&quot;: loadImage('http://127.0.0.1:8080/images/hive.png'),
          &quot;size&quot;: 128,
      },
      &quot;blue_flower&quot;: {
          &quot;image&quot;: loadImage('http://127.0.0.1:8080/images/blue_flower.png'),
          &quot;size&quot;: 25,
      },
      &quot;red_flower&quot;: {
          &quot;image&quot;: loadImage('http://127.0.0.1:8080/images/red_flower.png'),
          &quot;size&quot;: 25,
      },
      &quot;bee&quot;: {
          &quot;image&quot;: loadImage('http://127.0.0.1:8080/images/bee.png'),
          &quot;size&quot;: 20
      }
  }
  </code></pre>
  <p>(I can display them visiting the links however)</p>
  <p>But same results and I can't figure it out.</p>
  <p>I've seen people calling loadImage in draw and using a callback to display the image but I believe using loadImage continuously is a waste of resources and I'd prefer not doing it, even if it works.</p>
  <p>Do you know about anything that could cause P5 not displaying image without any error/warning ? <strike>Should I open an issue on their Github ?</strike> Clearly not</p>
  <p><strong>Edit :</strong>
  The display is actually working great, but not on the screen. Thanks to George Profenza I double checked everythink and realized I had a leftover div that has the following CSS property :</p>
  <pre><code>height: 100vh;
  </code></pre>
  <p>This, associated with :</p>
  <pre><code>html, body {
      overflow: hidden;
  }
  </code></pre>
  <p>Lead to the canvas being entirely off screen.</p>