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
.
————————————————————-
=======================================
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’]
