title: Best technique for topdown RPG-esque grid based scrolling?
body: <p>browser-based application, currently running on php/js/html5, jquery the only framework I'm using.</p>
  
  <p>If I've got enough 64x64 images to fill up my screen about 100x, what technique would you recommend to move the images so that it looks like it's scrolling?</p>
  
  <p>Think oldschool top-down RPG's if you will.</p>
  
  <p>What I'm currently considering:</p>
  
  <ul>
  <li>HTML5 Canvas</li>
  <li>array1 with all the images, array keys being coords for each image</li>
  <li>array2 with just the images <em>currently on the screen</em></li>
  <li>when moving to the left:
  <ul>
  <li>move all images 64px to the right (so that it moves in increments)</li>
  <li>fetching the lacking images from the array1, stripping the ones that dropped off the screen</li>
  <li>removing the images that dropped off the screen from the canvas</li>
  </ul></li>
  </ul>
  
  <p>It's not an actual game, but that <strong>is</strong> the effect I'm trying to achieve.</p>
  
  <p>I'll take any hints/tips I can get for this; from "use html tables instead of Canvas" to "impossible to streamline this for the web".</p>
  
  <p>My main concern: speed. I'd like to be able to zoom out as well, to the point where I'd be using a LOT more images on the screen (32x32, perhaps even 16x16) but I'm aware that browser-based applications might not be up to that task.</p>