title: HTML5 Canvas: drawing on area larger than window
body: <p>I have a full-screen viewport of a map drawn on an HTML Canvas which can be dragged.</p>
  
  <p>I've tried two implementations for animating the dragging. </p>
  
  <p>First I had the canvas the width and height of the window, re-drawing for each mousemove event as the user dragged the map, translating the drawn elements. But firefox in particular was very jerky, a low FPS, even using requestAnimationFrame.</p>
  
  <p>Instead I tried just moving the canvas element itself as the user drags. In other words, drawing on a canvas 3 times the width and height of the window, centered, allowing a full drag in any direction, and having it re-draw each time the user finishes a drag. This worked for chrome, but IE and firefox only drew the top left quadrant of the canvas. (So any drawing can only be seen when the canvas is dragged towards the bottom right.)</p>
  
  <p>Could anyone suggest a good way of detecting when the second method cannot be used? With the second method, both IE and Firefox <code>$('canvas').attr("width")</code> returns the canvas width as being 3 times the height of the window, so that's not an option.</p>
  
  <p>The only option I can think of is manually testing the second method on every browser, and create a lookup array so the code knows when to fall back to the first method.</p>
  
  <p>Perhaps someone knows of a better way to approach all this?</p>
  
  <p>Thanks</p>