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().

context.translate(0, canvas.height);

And I know that I can invert the y-axis using scale().

context.scale(1, -1);

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?

Answers


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.

Here's a discussion on the subject.


Need Your Help

Includes not covering select list

sql-server indexing

I have tables 2 tables in my query. I created a nonclustered index on the join and where clause columns and included the select list. When I run the query and look at the execution plan and stati...

Updating variable every x minutes

c ipc glib

I have a small program, which uses glib.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.