title: How is this JavaScript code working without invoking the functions?
body: <p>This is the codepen of the code <a href="https://codepen.io/p5js/pen/wreBKy" rel="nofollow noreferrer">https://codepen.io/p5js/pen/wreBKy</a> . Shouldn't the canvas be created only if I call the function with setup(); ?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.sound.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;script src="sketch.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>html, body {
    margin: 0;
    padding: 0;
  }
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>function setup() { 
    createCanvas(400, 400);
  } 
  
  function draw() { 
    background(220);
  
  }
  </code></pre>