title: Image won't show up from JavaScript coding
body: <p>The result of this code should show an image floating however I messed up somewhere and the error system on my text editor ( the one that puts the red Xs in the margin, I forgot what it's called ) is disabled and I can't seem to find how to turn it on.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// CONSTANTS
  var CANVAS_WIDTH = 800;
  var NANONAUT_WIDTH = 118;
  var nanonautX = CANVAS_WIDTH - NANONAUT_WIDTH;
  var CANVAS_HEIGHT = 600;
  var NANONAUT_HEIGHT = 229;
  var GROUND_Y = 540;
  // SETUP
  var canvas = document.createElement("canvas");
  var c = canvas.getContext("2d");
  canvas.width = CANVAS_WIDTH;
  canvas.height = CANVAS_HEIGHT;
  document.body.appendChild(canvas);
  
  var nanonautImage = new Image();
  nanonautImage.src = "dad.png";
  
  var nanonautX = 50;
  var nanonautY = 40;
  
  window.addEventListener("load", start);
  
  function start() {
    window.requestAnimationFrame(mainLoop);
  }
  // MAIN LOOP
  function mainLoop() {
    update();
    draw();
    window.requestAnimationFrame(mainLoop);
  }
  // PLAYER INPUT
  // UPDATING
  function update() {
    
  }
  // DRAWING
  function draw() {
    c.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
    
    c.drawImage(nanonautImage, nanonautX, nanonautY);
  }</code></pre>
  </div>
  </div>
  </p>