html5 canvas tutorials set text font, size and style

Set text font,size and style

how to set font-family,font-size and font-style using html5 canvas

We can draw text using html5 canvas by calling method fillText( ) or strokeText() .
The syntax for fillText() method is given below.

Syntax:


context.fillText("Hello World", 50,100);
The syntax for strokeText() is given below.
Context.strokeText("hello World", 50,100);

We set the style of text as:

The Syntax


Context.strokeStyle="blue";
Context.fillStyle ="blue";

In fillText() method,text drawn is filled with set color specified by us,default is black. In strokeText() method, text drawn is hollow. Only out line of text is drawn.

Set text font size and style and family of text

We can use font property to set font style, font size and font family.

font style

In case of style we can take three values

  • normal
  • italic
  • bold

font size

We can set font size by using css font size attributes.We can use different units for setting font size.The font size can be fixed or relative or combination of both. In setting font size we use different units. These units are, pt, pixel, em.
If we do not set font size ,the default font size for paragraph is applied, this is 1em or 16 pixels.
1em = 16px
Or 1px = 1em/16
Font can be given in any format:
16px;
200%;
2.2em;
40pt;

The Font family

Font family property can take several font name.
Font family name can be generic or specific.
Generic examples are:
"Serif","sans-serif","cursive","fantasy","monospace"
Specific examples are:

"times","corrier","arial"

The complete code for setting font style,size and family using html5 canvas

————————————————————-



<!DOCTYPE html>
<html>
    <head>
        <title>Drawing </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");
            context.fillStyle="blue";
            context.font ="italic 40pt Calibri";
            context.fillText("Hello  HTML5 Canvas", 50,100);
            
            
        </script>
    </body>
</html>

————————————————————-

how to set font family,size and style using htm5 canvas code output in browser

.

————————————————————-

how to set font size,style and familyby using html5 canvas
=======================================

code demo of setting font size, style and family on Codepen

========================================
[codepen_embed height=500 theme_id=1 slug_hash=”MYObdj” user=’aslamwaqar’ default_tab=’html’

animations=’run’]

Next Lecture

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.