title: Why aren't I getting performance improvements with my canvas?
body: <p>I'm trying to make a simple maze navigation game using an HTML5 canvas, where the player character stays in the center of the screen and the maze moves around them.</p>
  
  <p>The maze is represented using a 2D array of tile objects, so my first approach to drawing was something like:</p>
  
  <pre><code>for(var row=frameStart; row&lt;=frameEnd; row++) {
      for(var col=frameStart; col&lt;=frameEnd; col++)
          maze[row][col].draw();
      }
  }
  </code></pre>
  
  <p>...where frameStart and frameEnd are computed each call to the paint method in order to avoid drawing parts of the maze that aren't visible. Anyway, this was a bit too slow for me, so I decided to save the whole maze into an image using </p>
  
  <pre><code>var img = new Image();
  img.src = canvas.toDataURL();
  </code></pre>
  
  <p>So now, I'm drawing the maze just one time, saving it into an image, and from then on just drawing a part of that saved image every frame using <code>ctx.drawImage(img, ...)</code> instead of looping through lots of tile elements and drawing each individually. </p>
  
  <p>However, I found that this method is not noticeably faster, and I'm at a loss for how I can increase the performance any further, and am left wondering why my image idea didn't increase the performance. It currently takes longer than I'd like to render each frame. I currently have the game locked into rendering every single frame so I can easily see how long it takes to do so based on how fast the player character moves.</p>