HTML5 Canvas (inverted) coordinate system

Question

I am new to Canvas, and wonder:

1. the rationale of using inverted cartesian coordinate system.
2. Say, I need to chart some values in histogram. Is an easy way to rotate/map a canvas frame to cartesian coordinate system.?

Answer 1

Canvases are inverted because it is intuitive to a lot of interfaces. Web pages are more like a sheet of paper than a cartesian graph, because you start at the top left and read down. Therefore, html is laid out like that. I assume the canvas element uses the same coordinate system for consistency.

You can flip it by scaling the y axis by -1. You might need to transform it as well, i'm not sure about that, but there's a comment on your question that should help with that. The transforming functions are pretty much the same in html as they are in that post.

I use the html5 standard draft a lot for reference. Here's some content from the canvas 2d context section:

void scale(in double x, in double y);
void rotate(in double angle);
void translate(in double x, in double y);
void transform(in double a, in double b, in double c, in double d, in double e, in double f);
void setTransform(in double a, in double b, in double c, in double d, in double e, in double f);