javascript - In HTML5 Canvas, can I make the y axis go up rather than down? -


i'm drawing graph in canvas , struggling fact y-axis "backward." origin in top-left corner, , increasing values go down rather up.

(0,0)            (x,0)       (0,y) ^       +-------------->             |       |                            |       |    canvas                  |     instead       |                  |     of       |                            |       |                            +-----------------> (0,y) v                       (0,0)              (x,0)  

i know can move origin bottom-left corner using translate().

context.translate(0, canvas.height); 

and know can invert y-axis using scale().

context.scale(1, -1); 

that seems work, except causes text appear upside-down. there way make canvas's coordinates work way expect?

for more modern setup, can use context.transform(1, 0, 0, -1, 0, canvas.height). flips y axis , moves whole canvas 1 screenful.

more on available transformations: https://developer.mozilla.org/en-us/docs/web/api/canvasrenderingcontext2d/transform


Comments

Popular posts from this blog

asp.net - repeatedly call AddImageUrl(url) to assemble pdf document -

java - Android recognize cell phone with keyboard or not? -

iphone - How would you achieve a LED Scrolling effect? -