title: how to reset the axix of HTML5 Canvas
body: <p>I am very new to html5.
  infact this is my first work.</p>
  
  <p>I am working on a small project. Part of the project is to read an xml file which has shapes in it</p>
  
  <pre><code>  &lt;Graphic&gt;
       &lt;object_type&gt;LINE&lt;/object_type&gt;
       &lt;field_1&gt;3.6082475185394287&lt;/field_1&gt;
       &lt;field_2&gt;541.23712158203125&lt;/field_2&gt;
       &lt;field_3&gt;28.86598014831543&lt;/field_3&gt;
       &lt;field_4&gt;474.48452758789062&lt;/field_4&gt;
       &lt;field_6 /&gt;
       &lt;field_7 /&gt;
       &lt;field_8 /&gt;
       &lt;field_9 /&gt;
    &lt;/Graphic&gt;
    &lt;Graphic&gt;
       &lt;object_type&gt;LINE&lt;/object_type&gt;
       &lt;field_1&gt;10.824742317199707&lt;/field_1&gt;
       &lt;field_2&gt;562.8865966796875&lt;/field_2&gt;
       &lt;field_3&gt;3.6082475185394287&lt;/field_3&gt;
       &lt;field_4&gt;541.23712158203125&lt;/field_4&gt;
       &lt;field_6 /&gt;
       &lt;field_7 /&gt;
       &lt;field_8 /&gt;
       &lt;field_9 /&gt;
    &lt;/Graphic&gt;
  </code></pre>
  
  <p>after reading the xml file i am iterating through the coordinates. and drawing the object on the html5 canvas.</p>
  
  <p>I have two troubles....</p>
  
  <p>1) the photo is being drawn upside down... so i need to rotate the canvas
  <a href="http://agilani.byethost10.com/img.jpg" rel="nofollow">Image can be viewed here</a></p>
  
  <p>2) i need to scale the whole object within the canvas. for now i am dividing every coordinate with 8 to scale it down. how i can scale it according to screen resolution and canvas...</p>
  
  <p>cannot get my head around this</p>