2D Text tutorial using HTML5 Canvas
Today we will learn or we will become able to draw 2d text with the help of HTML canvas.
The are two methods used by html5 canvas for drawing text on canvas.
fillText()strokeText()
fillText() |How to draw 2D text
In this method the text drawn is filled by specified color which we set with fillStyleattribute.The procedure for drwing text with fillText() method will be will include following step
Step 1: Define a 2D
var canvas =document.getElemnetById("myCanvas");
var context = canvas.getContext("2d");
Step 2: Set the style of text
context.font = "40pt Calbri"; // set the font-size
context.fillStyle = "black" // Set the color of font
Set alignment of Text horizontally and vertically : Step 3
// align text horizontally center
context.textAlign ="center";
// align text vertically center
context.textBaseline ="middle";
Step 4:Drawing of text using html5 Canvas
For drawing text on canvas ,the syntx is
context.fillText("Textvalue",x,y);
Here Textvalue is the text which we want to draw.x is the XCoordinate of point where text will be start,y is the yCoordinate of point from where we start placing our text.
context.fillText("Hello Canvas World !" ,canvas.width/2,120);
Step 5: Embed Canvas tag in html5 document
Last Step is to embed canvas element in the body of html5 document.
< canvas width="600" height="400" style ="border: 1px solid #0000ff; " >
< /canvas >
strokeText()
The strokeText() method will color the perimeter of text instead of filling the text.fillText() and strokeText both can be used.It is good practice to use fillText() method before the
strokeText
——————————————-
fillText html5 Canvas complete code example
—————————————–
<html>
<head>
<title>Drawing Text on html5 Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="200"
style="border: 1px solid black">
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// set the font-size
context.font = "40pt Calbri";
// Set the color of font
context.fillStyle = "black" ;
// align text horizontally center
context.textAlign ="center";
// align text vertically center
context.textBaseline ="middle";
context.fillText("Hello Canvas World filled !" ,canvas.width/2,120);
</script>
</body>
</html>
=============================================
HTML5 Canvas fillText() example
=============================================
——————————————–
Live demo HTML5 Canvas 2D Text on codepen
——————————————-
[codepen_embed height=500 theme_id=1 slug_hash=’qEXxpY’ user=’aslamwaqar’ default_tab=’html’
animations=’run’]
[/codepen_embed]
======================================================
Complete Code for strokeText example
======================================================
<html>
<head>
<title>Drawing Text on html5 Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="200"
style="border: 1px solid black">
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// set the font-size
context.font = "40pt Calbri";
// Set the color of font
context.strokeStyle = "blue" ;
// align text horizontally center
context.textAlign ="center";
// align text vertically center
context.textBaseline ="middle";
context.strokeText("Hello Canvas World stroked !" ,canvas.width/2,120);
</script>
</body>
</html>
Picture of strokeText on web browser
——————————————–
complete code on pencode
——————————————-
[codepen_embed height=500 theme_id=1 slug_hash=’MYvQQJ’ user=’aslamwaqar’ default_tab=’html’
animations=’run’]
[/codepen_embed]
Visit theiteducation.comVisit this youtube channel to get in touch with all the latest video step by step tutorials fo html5 canvas as well as to learn this html5 canvas course efficiently then what you have to do is to complete this course from this plattform and all other topics like html5 canvas javascript framework,html5 canvas image annotation, html5 canvas drag and drop,html5 canvas layers and all other topic of html5 canvas.
