HTML - textalign property in html5 canvas - tutorial

Code

<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy-HTML Canvas textAlign</title>
    </head>
    <body>
        <h1>Wikitechy HTML Canvas textAlign with example:</h1>
        <canvas id="myCanvas" width="600" height="300" style="border:1px solid #d3d3d3;">
        </canvas>
        <script>
            
            var v = document.getElementById("myCanvas");
            var vps = v.getContext("2d");
            
            vps.strokeStyle = "blue";
            vps.moveTo(300, 30);
            vps.lineTo(300, 270);
            vps.stroke();
            
            vps.font = "20px Times New Roman";
            
            vps.textAlign = "start";
            vps.fillText("textAlign=start",300, 60);
            vps.textAlign = "end";
            vps.fillText("textAlign=end", 300, 100);
            vps.textAlign = "left";
            vps.fillText("textAlign=left", 300, 150);
            vps.textAlign = "center";
            vps.fillText("textAlign=center",300, 210);
            vps.textAlign = "right";
            vps.fillText("textAlign=right",300, 270);
        </script>
    </body>
</html>

Result