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
Post a Comment