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.
ctx.translate(0, canvas.height);
ctx.scale(1, -1);
See a demo on JSFiddle.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With