In HTML5 Canvas, can I make the y axis go up rather than down?
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.
(0,0) (x,0) (0,y) ^ +--------------> | | | | CANVAS | INSTEAD | DOES THIS | OF THIS | | | +-----------------> (0,y) v (0,0) (x,0)
I know that I can move the origin to the bottom-left corner using translate().
And I know that I can invert the y-axis using scale().
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?
For more modern setup, you can use canvas.transform(1, 0, 0, -1, 0, canvas.height). This flips y axis and moves the whole canvas one screenful.
More on available transformations: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform
I think you'd do much better to just get used to it. The origin is in the top left with most pixel-based video/screen APIs.