title: Uncaught ReferenceError: loadImage is not defined
body: <p>I'm trying to run this simple Game written in Javascript from my browser (Chrome):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;script src="p5.js"&gt;&lt;/script&gt;
      &lt;script src="CC Game Alessa Endspiel.js"&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is my javascript file which includes the loadimage Code. The Files are all in the same Folder as the js. and index file.</p>
  
  <pre><code>var gamestate = "intro";
  //Früchte
  var Strawberry  = loadImage("Strawberry.png");
  var Banana      = loadImage("Banana.png");
  var Coconut     = loadImage("Coconut.png");
  var Grapes      = loadImage("Grapes.png");
  var Pineapple   = loadImage("Pineapple.png");
  var Mango       = loadImage("Mango.png");
  var Raspberry   = loadImage("Raspberry.png");
  var Background1 = loadImage("Background1.jpg");
  var Baba2       = loadImage("Baba2.png");
  var StartScreen = loadImage("StartScreen.jpg");
  var StartButton = loadImage("StartButton.png");
  var TimeClock   = 520;
  var Princess    = loadImage("indianprincess.jpg");
  
  var player_img = image(Baba2,mouseX,470,19,19);
  </code></pre>
  
  <p>Im totally beginner and hope this is not a too stupid question >.&lt;</p>
  
  <p><strong>edit</strong>:
  thx a lot !</p>
  
  <p>now i added preload function:</p>
  
  <pre><code>var Strawberry;
  var Banana;
  var Coconut;
  var Grapes;
  var Pineapple;
  var Mango;
  var Raspberry;
  var Background1;
  var Baba2;
  var StartScreen;
  var StartButton;
  var TimeClock;
  var Princess;
  
  var player_img;
  
  
  function preload() {
  
    Strawberry  = loadImage("Strawberry.png");
    Banana      = loadImage("Banana.png");
    Coconut     = loadImage("Coconut.png");
    Grapes      = loadImage("Grapes.png");
    Pineapple   = loadImage("Pineapple.png");
    Mango       = loadImage("Mango.png");
    Raspberry   = loadImage("Raspberry.png");
    Background1 = loadImage("Background1.jpg");
    Baba2       = loadImage("Baba2.png");
    StartScreen = loadImage("StartScreen.jpg");
    StartButton = loadImage("StartButton.png");
    Princess    = loadImage("indianprincess.jpg");
  
  }
  function setup() {
    image(Strawberry, 0, 0);
    image(Banana, 0, 0);
    image(Coconut, 0, 0);
    image(Grapes, 0, 0);
    image(Pineapple, 0, 0);
    image(Mango, 0, 0);
    image(Raspberry, 0, 0);
    image(Background1, 0, 0);
    image(Baba2, 0, 0);
    image(StartScreen, 0, 0);
    image(StartButton, 0, 0);
    image(Princess, 0, 0);
    player_img = image(Baba2,mouseX,470,19,19);
  }
  </code></pre>
  
  <p>now there is :
  Uncaught ReferenceError: noStroke is not defined</p>
  
  <p>and also now i get:</p>
  
  <p>Access to Image at 'file:///C:/Users/Uni/Desktop/CC%20Game%20Alessa%20Endspiel/Banana.png' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access.</p>
  
  <p>-.-</p>