Set Canvas Origin To The Lower-left Corner

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 bu

Solution 1:

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

See a demo on JSFiddle.

Solution 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 coordinatefunctioncartToScreen(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.

Solution 3:

One of the easiest and correct ways is to use ctx.transform() method documentation is here