title: Horizontal Scrolling on Canvas. HTML5
body: <p>I'm creating a canvas via javascript on a webproject.</p>
  
  <p>The canvas has graphical representations on the x-y plane.</p>
  
  <p>I am trying to add the horizontal-scrolling feature to the canvas.</p>
  
  <p>I have investigated a few methodologies:-</p>
  
  <p>1) draw 12 months worth of data on the canvas, when the mouse scrolls forward, 1st month's data disappears, and at the end a new months data is added, new canvas is drawn. </p>
  
  <p>Con:- Everytime the mouse scrolls to pan thru the timeline - a new SQL query has to be made, making my web application very slow. </p>
  
  <p>2) maybe I can draw say 10 years worth of data on the canvas via 1 SQL query, but only show 12 months worth of the data. masking the rest of the 9 years. Now when the client scrolls, I capture the scroll event and move to the appropriate part of the canvas. Is this possible? If so then how?</p>
  
  <p>Can anyone advise?</p>
  
  <p><img src="https://i.stack.imgur.com/yGK1A.png" alt="My current representation of the canvas = with only 12 months worth of data"></p>
  
  <p><strong>My current representation of the canvas = with only 12 months worth of data</strong></p>
  
  <p><strong>To be more specific on the scrolling, I would like to have a feeling such as the following widget for my client-side scrolling action:-</strong></p>
  
  <p><a href="http://www.simile-widgets.org/timeline/" rel="nofollow noreferrer">http://www.simile-widgets.org/timeline/</a></p>