How to draw 2D text using html5 Canvas

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

html5 canvas 2D text with fillText() method

=============================================

——————————————–

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

 

see demo on pencode

 

——————————————–
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.

How to draw 2D text using html5 Canvas

Author: Habibullah Qamar

Its me Habib Ullah Qamar working as a Lecturer (Computer Sciences) in Pakistan. I have an MS(M.Phil) degree in computer sciences with specialization in software engineering from Virtual University of Pakistan Lahore. I have an experience of more than 15 years in the filed of Computer Science as a teacher. Blog Writing is my passion. I have many blogs, This one is special made with the aim of providing 100% Free online coaching and training to the students of under-graduate and postgraduate classes. Most of the students enrolled in computer sciences, information technology, software engineering and related disciplines find it difficult to understand core concepts of programming and office automation. They find difficult in understanding and solving their assignments.