title: HTML5 Canvas smooth scroll tilemap
body: <p>I've tried to build a scrollable tilemap with the canvas object which automatically calculates it's size relative to the screen resolution and renders the tiles relative to a position on a (bigger) map.</p>
  
  <p>I planned to move the generated tiles and only draw the tiles that need to be drawn new.</p>
  
  <p>So that means I scroll the map, draw the new tiles at the top (for example on moving upwards) and deleting the last tiles on the botton which are now out of the visible canvas.</p>
  
  <p><strong>My problem is:</strong></p>
  
  <p>I don't think that it's very good for the performance to change the position of every tile in the canvas, I think this could be solved using <code>getImageData()</code> and <code>putImageData()</code> but there is still one problem left:</p>
  
  <p>If i just move these tiles and draw new tiles it will always "hop" for 30px (1 tile = 30x30), so is there a simple / performance technically good way to make this with a smooth, linear scroll effect?</p>