HTML canvas textAlign Property

Introduction

Create a red line in position 150.

View in separate window 

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="180" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

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

// Create a red line in position 150
ctx.strokeStyle = "red";
ctx.moveTo(150, 20);/*from w  ww.  j a v a 2 s .c  om*/
ctx.lineTo(150, 170);
ctx.stroke();

ctx.font = "15px Arial";

// Show the different textAlign values
ctx.textAlign = "start";
ctx.fillText("textAlign=start", 150, 60);
ctx.textAlign = "end";
ctx.fillText("textAlign=end", 150, 80);
ctx.textAlign = "left";
ctx.fillText("textAlign=left", 150, 100);
ctx.textAlign = "center";
ctx.fillText("textAlign=center",150, 120);
ctx.textAlign = "right";
ctx.fillText("textAlign=right",150, 140);
</script>

</body>
</html>

The textAlign property sets or gets the current alignment for text content, according to the anchor point.

Use the fillText() or the strokeText() method to actually draw and position the text on the canvas.

The textAlign property Default value: start 


context.textAlign = "center|end|left|right|start";

Property Values

Values Description
start Default. The text starts at the specified position
endThe text ends at the specified position
center The center of the text is placed at the specified position
left The text starts at the specified position
right The text ends at the specified position



PreviousNext

Related