title: I have the beginnings of a flappy bird game - the canvas fails to render/display
body: <p>I have the beginnings of a flappy bird game - the canvas fails to render/display. What should be displayed is a blue sky (context defined below) and a falling bird. Instead it just shows a black screen.</p>
  <p>The code is below: (all in one file) and the bird.png is in the root folder.</p>
  <pre><code>&lt;body style=&quot;height: 100vh; background: #111; text-align: center;&quot;&gt;
      &lt;canvas id=&quot;c&quot; width=&quot;400&quot; height=&quot;400&quot;&gt;&lt;/canvas&gt;
      
  
     &lt;script&gt;
  //set up context
         context=c.getContext(&quot;2d&quot;);
  //create bird
         const bird=new Image();
         bird.src=&quot;bird.png&quot;;
         //create variables
         var canvasSize=400;
         var birdSize=30;
         var birdX=0;
         var birdY=200;
         var birdDY=0;
         var score=0;
         var bestScore=0;
         var interval=30; //the speed at which the game is played
         
         
         setInterval(()=&gt; {
             context.fillStyle=&quot;skyblue&quot;;
             context.fillRect(0,0,canvasSize,canvasSize); //Draw sky
             birdY - =birdDY -=0.5; //Gravity
             context.drawImage(bird,birdX,birdY,birdSize,birdSize);// Draw bird (multiply the birdSize by a number to adjust size)
             context.fillStyle=&quot;black&quot;;
             context.fillText('Flappy Birds',170,10); //x and y
             context.fillText('Score: ${score++}', 350,380);//Draw score       
         },interval)
         
      &lt;/script&gt;
      
  &lt;/body&gt;
  </code></pre>
  <p>What is further confounding, is that it is identical (or so says my &quot;beyondcompare&quot; tool, to another file (code below) which works perfectly and renders the required canvas, blue sky and bird to the screen.</p>
  <p>I changed the context.filltext to use ` instead of &quot; or ' (for the display of the text labels) but that didn't work either. Does this matter?</p>
  <p><strong>Code below (which works)</strong></p>
  <pre><code> &lt;body style=&quot;height: 100vh; background: #111; text-align: center;&quot;&gt;
    &lt;canvas id=&quot;c&quot; width=&quot;400&quot; height=&quot;400&quot;&gt;&lt;/canvas&gt;
    
            
    &lt;script&gt;
        
      //set up context
      context = c.getContext(&quot;2d&quot;);
      //create bird
      const bird = new Image();
      bird.src = &quot;bird.png&quot;;
      //create variables
      var canvasSize = 400;
      var birdSize=30;
      var birdX = 0;
      var birdY =200;
      var birdDY = 0;
        
      var score = 0;
      var bestScore=0;
      var interval = 30; //the speed at which the game is played
          
              
        
        setInterval(() =&gt; {
        context.fillStyle = &quot;skyblue&quot;;
        context.fillRect(0,0,canvasSize,canvasSize); // Draw sky
        birdY -= birdDY -= 0.5; // Gravity
        context.drawImage(bird, birdX, birdY, birdSize, birdSize); // Draw bird (multiply the birdSize by a number to adjust size)
        context.fillStyle = &quot;black&quot;;
        context.fillText(`Flappy Birds`, 170, 10); //x and y
        context.fillText(`Score: ${score++}`,350, 380); // Draw score
             }, interval)
    &lt;/script&gt;
  </code></pre>
  <p>Note, I have compared them using a tool, and it shows no differences except for some spacing, which I assume doesn't matter.</p>
  <p>Could anyone point out the error and tell me what I have done wrong.</p>