html - 左下隅にhtml5キャンバスの原点を設定するにはどうすればよいですか？

Question

古典的な（O、x、y）デカルトランドマークのように、キャンバスの原点を左下隅に設定したいと思います。

Answer 1

コンテキストの変換はcanvas、原点の変更と同じです。

<canvas width="100" height="100" id="mycanvas"></canvas>

<script>
var c = document.getElementById('mycanvas');
var ctx = c.getContext('2d');

ctx.transform(-1, 0, 0, 1, 100, 0);

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100,100);
ctx.closePath();

ctx.lineWidth = 5;
ctx.stroke();
</script>

デモ。