title: How to scale html5 canvas to show google maps coordinates
body: <p>I have HTML5 canvas:</p>
  
  <pre><code>&lt;canvas id="myCanvas" width="500" height="400"
  style="border:1px solid #000000; background:#ccc;"&gt;
  &lt;/canvas&gt;
  </code></pre>
  
  <p>and here is easy to draw lines but line must be (x->max 500, y->max400) and thats ok.</p>
  
  <p>But I how I can scale this canvas to show coordinates (latitude, longitude) - coordinates is high precision decimal values:</p>
  
  <blockquote>
    <p>{"lat":"52.67554942424349","lng":"8.372654914855957"},{"lat":"52.67528921580262","lng":"8.373513221740723"},{"lat":"52.6759657545252","lng":"8.374114036560059"},{"lat":"52.682574466310314","lng":"8.37256908416748"},{"lat":"52.68356308524067","lng":"8.373942375183105"},{"lat":"52.68293869694087","lng":"8.375487327575684"},{"lat":"52.67685044320001","lng":"8.376259803771973"},{"lat":"52.6756535071859","lng":"8.379607200622559"},{"lat":"52.676017795531436","lng":"8.382096290588379"},{"lat":"52.68101344348877","lng":"8.380722999572754"},{"lat":"52.68351105322329","lng":"8.383641242980957"},</p>
  </blockquote>
  
  <p>When I draw it on google map then looks like this:
  IMAGE URL: <a href="http://i.stack.imgur.com/haTkH.png" rel="nofollow">http://i.stack.imgur.com/haTkH.png</a></p>
  
  <p>How I can transform my decimal values from coordinates to show this coordinates from above on html5 canvas like on google map? Is there any way? I was spend 3 days to try to find solution for this probem? How that work?</p>
  
  <p><em>thanks and sorry for my english</em></p>