Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 but only with the positive part (first quadrant). So I need it to start with 0.0 at down-left corner.

like image 877
spiroski Avatar asked Oct 09 '11 23:10

spiroski


2 Answers

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

See a demo on JSFiddle.

like image 149
icktoofay Avatar answered Nov 15 '22 15:11

icktoofay


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.

like image 24
Simon Sarris Avatar answered Nov 15 '22 14:11

Simon Sarris