How to use HTML5 Canvas Text Wrap

This article describe about HTML5 Canvas Text Wrap.
  • 4691

HTML5 Canvas Text Wrap

  • Text wrap is create a function in HTML5 canvas.
  • The function is defined text string, position, width, line height.
  • mesaureText() method is count next line, when the next line should wrap.

Example

<!DOCTYPE HTML>

<html>

  <head>

    <style>

      body

{

        margin: 0px;

        padding: 0px;

      }

      #myCanvas

 {

        border: 1px solid #9C9898;

      }

    </style>

    <script>

        function wrapText(context, text, x, y, maxWidth, lineHeight)

{

            var words = text.split(" ");

            var line = "";

 

            for (var n = 0; n < words.length; n++)

{

                var testLine = line + words[n] + " ";

                var metrics = context.measureText(testLine);

                var testWidth = metrics.width;

                if (testWidth > maxWidth)

{

                    context.fillText(line, x, y);

                    line = words[n] + " ";

                    y += lineHeight;

                }

                else {

                    line = testLine;

                }

            }

            context.fillText(line, x, y);

        }

 

        window.onload = function ()

{

            var canvas = document.getElementById("myCanvas");

            var context = canvas.getContext("2d");

            var maxWidth = 300;

            var lineHeight = 25;

            var x = (canvas.width - maxWidth) / 2;

            var y = 60;

            var text = "All the world 's a stage, and all the men and     women merely players. ";

 

            context.font = "16pt Calibri";

            context.fillStyle = "#333";

 

            wrapText(context, text, x, y, maxWidth, lineHeight);

        };

 

    </script>

  </head>

  <body>

    <canvas id="myCanvas" width="400" height="170"></canvas>

  </body>

</html>

Output

You may also want to read these related articles here

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

© 2019 DotNetHeaven. All rights reserved.