Set canvas origin to the lower-left corner

Question

Is there a way to set the origin to lower-left of the canvas? I tried scaling by −1 but after that everything is upside down. I need to make something like a coordinate system but only with the positive part (first quadrant). So I need it to start with 0.0 at down-left corner.

Answer 1

ctx.translate(0, canvas.height);
ctx.scale(1, -1);

See a demo on JSFiddle.

Answer 2

is there a way to set the origin to lower-left of the canvas?

Not quite the way you'd like, no. The best you can do there is what icktoofay said.

That being said it isn't too hard to make a function to convert between one system and the other. For example:

// Given an X,Y in 1st quadrant cartesian coordinates give the corresponding screen coordinate
function cartToScreen(px, py) {
  return [px, -py + HEIGHT];
};

So you'd write:

var coords = cartToScreen(50,50);
// draws 50 pixels from the bottoom instead of 50 pixels from the top
ctx.fillText("lalala", coords[0], coords[1]);

Example

In any case, I'd strongly suggest that if you are at all able to just get used to screen coordinates. It will save you from loads of headaches in the future if you don't always have to account for this little difference.

Answer 3

最简单和正确的方法之一是使用 ctx.transform() 方法文档在这里