<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
h1,
h2 {
color: green;
}
body {
text-align: center;
}
</
style
>
</
head
>
<
body
>
<
h1
>GeeksForGeeks</
h1
>
<
h2
>HTML canvas textAlign Property </
h2
>
<
canvas
id
=
"sudo"
width
=
"300"
height
=
"200"
style
=
"border:3px solid red;"
>
Your browser does not support the HTML5 canvas tag.
</
canvas
>
<
script
>
var c = document.getElementById("sudo");
var ctx = c.getContext("2d");
// Create a blue line in position 170
ctx.strokeStyle = "blue";
ctx.moveTo(170, 20);
ctx.lineTo(170, 170);
ctx.stroke();
ctx.font = "15px Arial";
// Show the different textAlign values
ctx.textAlign = "start";
ctx.fillText("start", 170, 60);
ctx.textAlign = "end";
ctx.fillText("end", 170, 80);
ctx.textAlign = "left";
ctx.fillText("left", 170, 100);
ctx.textAlign = "center";
ctx.fillText("center", 170, 120);
ctx.textAlign = "right";
ctx.fillText("right", 170, 140);
</
script
>
</
body
>
</
html
>