HTML5 Canvas text alignment tutorial
how to set textalignment using html5canvas
In this html5 Canvas tutorial we will dicuss how to set text alignment using htm5 Canvas. Moreover In Html5 canvas , we used textAlign property to set the text alignment on the canvas. textAlign property can takes these following 5 values.
- start
- end
- left
- right
- center
Default value is start.
1. start
Similarly In this case the text is aligned at the normal start of line. However If text is aligned left to right text is at the left end, if text is aligned from right to left, then text is placed at the right.
2. end
Similarly In this case the text is aligned at the normal end of the line. However for left to right aligned text the text will be at the right end of line and for right to left aligned, Moreover the text will be at the left end.
3. left
Moreover The text is left-aligned.
4. Right
However the text is right-aligned.
5. center
Similarly The text is centered.
However The syntax for setting text alignment is given below.
Sytax:
Context.textAlign = value;
——————————————————-
HTML5 Canvas text Alignment complete code example
——————————————————————–
<!DOCTYPE html>
<html>
<head>
<title>how to set text alignment using html5 Canvas </title>
</head>
<body>
<canvas id ="myCanvas" width ="600" height ="400"
style="border: 1px solid blue;" >
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context =canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
context.font = '30pt Calibri';
context.textAlign = 'center';
context.fillStyle = 'blue';
context.fillText('Hello HTML5 Canvas!', x, y);
</script>
</body>
</html>
—————————————————————————
HTML5 Canvas Text Alignment
————————————————————
=================================================================
Live demo HTML5 Canvas text alignment on codepen
===================================================================
[codepen_embed height=500 theme_id=1 slug_hash=’VYxvEy’ user=’aslamwaqar’ default_tab=’html’
animations=’run’]
