textAlign Property - Javascript Canvas Reference

Javascript examples for Canvas Reference:textAlign

  1. HOME
  2. Javascript
  3. Canvas Reference
  4. textAlign

Description

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

Default value is start.

JavaScript syntax 

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 at the specified position
left The text starts at the specified position
right The text ends at the specified position

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="200" 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 ww w  .j a va 2 s. c o m*/
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>

Related Tutorials