We would like to know how to translate coordinate to left bottom corner.
<!-- w ww . jav a2s . c o m-->
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
ctx.translate(0, canvas.height);
ctx.scale(1, -1);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(10, 100);
ctx.lineTo(100, 50);
ctx.closePath();
ctx.stroke();
}//]]>
</script>
</head>
<body>
<canvas id="canvas" width="100" height="100"></canvas>
</body>
</html>
The code above is rendered as follows: