CODEWITHSUNDEEP
htmlcanvas
Melki
Melki

Reputation: 619

How can I set the origin of the html5 canvas in the bottom-left corner

I want to set the origin of my canvas in the bottom left corner like in a classic (O, x, y ) Cartesian landmark.

Upvotes: 1

Views: 1714

Answers (1)

robertc
robertc

Reputation: 75707

Transforming the canvas context is equivalent to changing the origin.

<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>

Demo.

Upvotes: 3

Related Questions