html tutorial - textAlign Property in HTML5 Canvas - html5 - html code - html form




Textalign property in html5 canvas

Learn html - html tutorial - Textalign property in html5 canvas - html examples - html programs

  • The textAlign property is one of the canvas property.
  • The textAlign property is used to sets or returns the current alignment for text content, belongs to the anchor point.

Syntax for textAlign Property in HTML5 Canvas:

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

Property values for textAlign Property in HTML5 Canvas:

Values Description
start The text starts at the specified location.
end The text ends at the specified location.
center The center of the text is placed at the specified location.
left The text starts at the specified location.
right The text ends at the specified location.

Sample Coding for textAlign Property in HTML5 Canvas:

Tryit<!DOCTYPE html>
<html>
    <head>
        <title>wikitechy-HTML Canvas textAlign</title>
    </head>
    <body>
        <h1>wikitechy-HTML Canvas textAlign with example:</h1>
        <canvas id="wikitechyCanvas" width="400" height="200" 
         style="border:1px solid #d3d3d3;">
        </canvas>
        <script>
            var v = document.getElementById("wikitechyCanvas");
            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>

Code Explanation for textAlign Property in HTML5 Canvas:

textAlign Property in HTML5 canvas Code Explanation

  1. “Wikitechy canvas” is used to declare the id value of the canvas tag.
  2. getElementById() method is used to get the canvas element by id.
  3. getContext() returns an object that provides methods and properties for drawing on the canvas.
  4. strokeStyle Property set as the blue color.
  5. The moveTo() method is used to select the starting point on (x, y) axis is (300,30).
  6. The lineTo() method is used to select the ending point at (300,270) in (x, y) axis.
  7. stroke() method is used to draw the actually path.
  8. font property as "20px Times New Roman"
  9. start: The text starts at the point is (300,60) in (x, y) axis.
  10. end:The text ends at the point is (300,100) in (x, y)axis.
  11. left:The text starts at the point is (300,150) in (x, y) axis.
  12. center: The center of the text is placed at the point as (300, 210) in (x, y)axis.
  13. right: The text ends at the point is (300,270) in x, y axis.
  14. fillText() method is used to draw the actual position on the text.

Output for textAlign Property in HTML5 Canvas:

textAlign Property in HTML5 canvas Output

  1. canvas is used to draw a rectangle.
  2. The output displays blue color path.
  3. The text textAlign=center displayed in center alignment.
  4. The text textAlign=start will be started from the blue line.
  5. The text textAlign=end will be ended in the blue line.
  6. The text textAlign=left displayed in left alignment.
  7. The text textAlign=right displayed in right alignment.

Browser Support for textAlign Property in HTML5 Canvas:

Yes 9.0 Yes Yes Yes

Tips and Notes


Related Searches to textAlign Property in HTML5 Canvas

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×