html tutorial - measureText() Method in HTML5 Canvas - html5 - html code - html form




Measuretext method in html5 canvas

Learn html - html tutorial - Measuretext method in html5 canvas - html examples - html programs

  • The measureText() method is used to set values that contains the width of the specified text, in pixels.

Syntax for measureText() Method in HTML5 Canvas:

context.measureText(text).width;

Parameter values for measureText() Method in HTML5 Canvas:

Parameter Description
text The text to be measured.

Sample Coding for measureText() Method in HTML5 Canvas:

Tryit<!DOCTYPE html>
<html>
    <head>
      <title>wikitechy-measureText() method in Canvas</title>
    </head>
    <body>
        <h2>Wikitechy-measureText() method in canvas</h2>
        <canvas id="wikitechyCanvas" width="300" height="150" 
          style="border:1px solid #d3d3d3;">
        </canvas>
        <script>
            var canvas = document.getElementById("wikitechyCanvas");
            var context = canvas.getContext("2d");
            context.font = "25px Times new Roman";
            var txt = "wikitechy world";
            context.fillText("width:" + context.measureText(txt).width, 10, 50);
            context.fillText(txt, 10, 100);
        </script>
    </body>
</html>

Code Explanation for measureText() Method in HTML5 Canvas:

measureText() method in HTML5 canvas Code Explanation

  1. ”wikitechyCanvas” is used to declare the id value of the canvas tag.
  2. getElementById: method is used to draw the element from canvas id value.
  3. The canvas.getContext() method returns an object that provides methods and properties for drawing on the canvas.
  4. The context.font method is used to set the font property as “25 px Times New Roman;
  5. The context.fillText() method is used to filltext(10,100).

Output for measureText() Method in HTML5 Canvas:

measureText() method in HTML5 canvas Output

  1. <canvas> is used to draw a rectangle and transform
  2. Defines a font style (25px times New Roman)

Browser Support for measureText() Method in HTML5 Canvas:

Yes 9.0 Yes Yes Yes

Related Searches to measureText() Method in HTML5 Canvas

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×