キャンバスの原点を左下隅に設定する

Question

キャンバスの左下に原点を設定する方法はありますか？私は− 1でスケーリングしようとしましたが、すべてが逆さまです。私は座標系のようなものを作る必要がありますが、正の部分（第1象限）だけで作る必要があります。だから私は左下に0.0から始める必要があります。

Answer 1

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

See a demo on JSFiddle.

Answer 2

キャンバスの左下に、原点を設定することが方法は何ですか？

あなたが好きな方法はありません。あなたがそこでできる最善のことは、icktoofayが言ったことです。

あるシステムと他のシステムとの間で変換する機能を作ることはあまり難しくないと言われています。

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

だから、あなたが書いたと思います：例えばどのような場合には

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

を、私はあなたがすべてでちょうど画面に慣れることができればと強くお勧めしたいです座標。この小さな違いを常に考慮する必要がなければ、将来の頭痛からあなたを救うでしょう。