Teach with us

Fractional font sizes for HTML5 Canvas?

HTML5 canvas API enables the developers to write text on an HTML page in the different ways such as in a canvas. Different browsers provide various kinds of font sizes on the HTML5 canvas specially when the font sizes are floating numbers like 2.456 px, 3.4 px etc.

So, how to apply fractional font size to a text in an HTML5 canvas?

First, let’s see what HTML5 canvas is.

What is a HTML5 Canvas?

Basically, canvas is rectangular enclosed area in a web page. By default, it has no border and content. The canvas element of HTML5 enables the user to draw dynamic 2D graphics and adding pictures on web page using javascript. It is represented by <canvas> tag. This element is supported by Chrome, Safari, Internet explorer, Firefox as well as Opera.

By default, the canvas element has height of 150px and width of 300px. According to your need, you can customize its size and border using CSS.

Syntax

<canvas id= “” ></canvas>

Example

<html>
<body>
   <canvas id= “demo” height= “170” width = ”260” style = “border: 2px solid #000000;” ></canvas>
</body>
</html>

Let’s see how to give fractional font size.

Example

<!DOCTYPE html>
<html>
<head>
   <script>
      function example() {
         const canvas = document.getElementById('demo');
         canvas.height = 1000;
         const context = canvas.getContext('2d');
         const min = 10;
         const height = 100;
         for (let i=min; i< 20; i+=0.1){
            const font_size = Math.round(i*10000)/10000;
            context.font = i + "px Calibri";
            context.fillText("This text is of font size   " +  font_size, 20, (font_size-min)*height);
         }   
      }
   </script>
</head>
   <body onload="example()">
   <canvas id="demo"> </canvas>
</body>
</html>

where,

.

  • example() is a function which tells the browser to set the font size for the HTML5 canvas of id = “demo”.

  • canvas is a variable which is used to edit the HTML5 canvas in our code.

  • context is a variable which contains getContext() function that is used to get access to the canvas tags drawing function.

  • min is a variable which specifies the minimum font size of the text in the HTML page.

  • height is a variable which specifies the height of each line in the HTML page.

  • for loop is used in our code for setting font size to the text specified in context.fillText. Here, the for loop iterates through the values of i that is from 10 to 20. After operation is completed, in each turn value of i increases by 0.1 .

  • Math.round(i*10000)/10000 is used to round off the font size nearest to 10000. Hence, the answer will be in 4 decimal places.

  • fillText() method is used to add filled text on the canvas

Syntax

object.fillText ( text, x, y, max width);

Parameters

  • text − refers to the text that is to be written on the canvas.

  • x − specifies the X coordinate of the point on the canvas from where the text needs to be written

  • y − specifies the Y coordinate of the point on the canvas from where the text needs to be written

  • max width − specifies the maximum width of the text in pixels

Example

<script>
   const a = document.getElementById( “demo”);
   const context = a.getContext(‘2d’);
   context.fillText (“This is an example” ,20, 60); 
</script>
<body> 
   <canvas id= “demo”> </canvas>
</body>

  • onload is an event which is often used within the <body> element to execute a code after a web page has completely loaded all the content like the script files, images etc.,

syntax

<element onload = “function()”>

Example

<img src = “example.jpg” onload = “load()” width= “220” height= “300”>
<script>
   function load() {
      alert (“image is being loaded”);
   }
</script>

Conclusion

HTML5 canvas is a very useful feature which enables the developers to create responsive images, high speed games etc. It also allows you to render text in different forms using different styling effects like fractional font sizes.

Updated on 12-Oct-2022 13:24:15

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements