Establecer el origen del lienzo en la esquina inferior izquierda

Question

Hola chicos, ¿hay alguna manera de establecer el origen en la esquina inferior izquierda del lienzo? Intenté escalar por − 1 pero después todo está al revés. Necesito hacer algo como un sistema de coordenadas pero solo con la parte positiva (primer cuadrante). Así que necesito que comience con 0.0 en la esquina inferior izquierda.

Answer 1

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

See a demo on JSFiddle.

Answer 2

hay una manera para establecer el origen de parte inferior izquierda del lienzo?

No del modo que a usted le gustaría, no. Lo mejor que puedes hacer allí es lo que dijo icktoofay.

Dicho esto, no es demasiado difícil hacer una función para convertir entre un sistema y el otro. Por ejemplo:

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

Por lo que iba a escribir:

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

En cualquier caso, me gustaría sugerir fuertemente que si usted está en todo capaz de simplemente acostumbrarse a la pantalla coordenadas Le ahorrará muchos dolores de cabeza en el futuro si no siempre tiene que dar cuenta de esta pequeña diferencia.