title: In HTML5 Canvas, can I make the y axis go up rather than down?
body: <p>I'm drawing a graph in Canvas and struggling with the fact that the y-axis is "backward." The origin is in the top-left corner, and increasing values go down rather than up.</p>
  
  <pre><code>(0,0)            (x,0)       (0,y) ^
        +--------------&gt;             |
        |                            |
        |    CANVAS                  |     INSTEAD
        |    DOES THIS               |     OF THIS
        |                            |
        |                            +-----------------&gt;
  (0,y) v                       (0,0)              (x,0) 
  </code></pre>
  
  <p>I know that I can move the origin to the bottom-left corner using translate().</p>
  
  <pre><code>context.translate(0, canvas.height);
  </code></pre>
  
  <p>And I know that I can invert the y-axis using scale().</p>
  
  <pre><code>context.scale(1, -1);
  </code></pre>
  
  <p>That seems to work, except that it causes text to appear upside-down. Is there a way to make Canvas's coordinates work the way I expect?</p>