Properties to create text using HTML5 Canvas


The HTML5 canvas element enables dynamic, scriptable display of bitmap images and 2D forms. A bitmap is updated using a low level procedural model. 2D game development is also aided by HTML5 Canvas.

The HTML <canvas> element is used to draw graphics on a web page.

Let’s dive into the article for learning more about creating text using HTML5 canvas.

Create text using HTML5 Canvas

Use the fillText() or strokeText() methods, or a mix of the two, to add text on the HTML "canvas" element. You can provide a variety of text settings, including style, weight, size, and font, using the font property (type: string). Italic, bold, or standard font styles are available. Normal style is the default.

Let’s look one by one to understand more clearly about creating text using HTML5 canvas.

Using the fillText() Method

Using the current fill style and font, the fillText() function renders filled text onto the canvas.

Syntax

Following is the syntax for fillText() method.

ctx.fillText(text, x, y, maxWidth)

let’s look into the following example.

Example

In the following example we are adding a text on the <canvas> element with the fillText() method.

<!DOCTYPE html>
<html>
   <head>
   <style>
   #tutorial {
      background: #82E0AA ;
      width: 250;
      height: 150;
   }
   </style>
   </head>
   <body>
      <canvas id="tutorial"></canvas>
      <script>
      var canvas = document.getElementById("tutorial");
      var context = canvas.getContext("2d");
      context.fillStyle = "#DFFF00";
      context.font = "bold 18px veranda";
      context.fillText("Tutorialspoint", (tutorial.width / 2) - 17, (tutorial.height / 2) + 8);
      </script>
   </body>
</html>

Output

When the script gets executed, it will generate an output consisting of a canvas drawn on the webpage along with the text written on the canvas obtained by using the fillText() method.

Example

Let’s look into the another example where we are using filltext() method with linear gradient.

<!DOCTYPE html>
<html>
   <body>
      <canvas id="tutorial" width="300" height="100"></canvas> 
      <script>
      var canvas = document.getElementById("tutorial");
      if (canvas.getContext)
      {
         var ctx = canvas.getContext('2d');
         gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
         gradient.addColorStop("0.3", "#DE3163");
         gradient.addColorStop("0.3", "#45B39D");
         ctx.font = "italic 700 25px Unknown Font, sans-serif";
         ctx.fillStyle = gradient;
         for (var i = 0; i < 75; i +=30 )
         {
            ctx.fillText("HELLO", i, i);
         }
      }
      </script>
   </body> 
</html>

Output

On running the above script, it will generate an output displaying a text drawn on the canvas using fillText() applied with a linear gradient on the webpage.

Using the strokeText() Method

The current font, lineWidth, and strokeStyle properties are used in conjunction with the strokeText() method to produce the provided text at the specified place.

Syntax

Following is the syntax for strokeText() method

ctx.strokeText(text, x, y, maxWidth);

let’s look into the following example.

Example

Considering the following example, we are adding a text on the <canvas> element with the strokeText() method.

<!DOCTYPE html>
<html>
   <head>
   <style>
   #tutorial {
      background: #E5E7E9 ;
   }
   </style>
   </head>
   <body>
      <canvas id="tutorial" width="250" height="100"></canvas>
      <script>
      var canvas = document.getElementById("tutorial");
      var context = canvas.getContext("2d");
      context.font = "bold 30px Arial";
      context.strokeText("Welcome", 50, 50);
      </script>
   </body>
</html>

Output

On running the above script, the output window will pop up, displaying the canvas drawn on the webpage along with the text filled inside the canvas using the strokeText() method.

Updated on: 11-Oct-2023

141 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements