HTML5 Game - Canvas Text Drawing

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Text Drawing

Introduction

We can draw text on the canvas.

The following code shows the methods available.

Name
 Description
 Returns
fillText(<text>, x, y, width)


 Draws and fills the specified text at the position (x, y).
The optional width argument sets an upper limit on
the width of the text
void


strokeText(<text>, x, y, width)


 Draws and strokes the specified text at the position
(x, y). The optional width argument sets an upper
limit on the width of the text
void


There are three drawing state properties to control text painting.

NameDescription Returns
fontSets the font used when text is drawnstring
textAlign Sets the alignment of the text: start, end, left, right, center string
textBaselineSets the text baseline: top, hanging, middle, alphabetic, ideographic, bottomstring

The following code shows how we can fill and stroke text.

We specify the value for the font property using the same format string as for the CSS font shorthand property.

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            canvas {border: thin solid black}
            body > * {float:left;}
        </style>
    </head>
    <body>
        <canvas id="canvas" width="350" height="140">
            Your browser doesn't support the <code>canvas</code> element
        </canvas>
        <script>
            let ctx = document.getElementById("canvas").getContext("2d");
            /*from  w w  w .java2s  . c  om*/
            ctx.fillStyle = "lightgrey";
            ctx.strokeStyle = "black";
            ctx.lineWidth = 3;
            
            ctx.font = "100px sans-serif";
            ctx.fillText("Hello", 50, 100);
            ctx.strokeText("Hello", 50, 100);
        </script>
    </body>
</html>

Text is drawn using the fillStyle and strokeStyle properties, we have the same set of colors, gradients and patterns as for shapes.

The following code shows how to draw a simple text string.

Demo

ResultView the demo in separate window 

<html>
    <head>
        <script>
            window.onload = function(){
                let canvas = document.getElementById("myCanvas");
                let context = canvas.getContext("2d");
                /* ww  w  .  ja va  2 s  .  c  om*/
                context.font = "40pt Calibri";
                context.fillStyle = "black";
                // align text horizontally center
                context.textAlign = "center";
                // align text vertically center
                context.textBaseline = "middle";
                context.fillText("Hello World!", canvas.width / 2, 120);
            };
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
        </canvas>
    </body>
</html>

Note

To draw text, define the font style and size with the font property.

You can also define the font color with the fillStyle property.

And define the horizontal text alignment with the textAlign property.

Define the vertical text alignment with the textBaseline property.

The textAlign property can be set to

  • left
  • center
  • right

The textBaseline property can be set to

  • top
  • hanging
  • middle
  • alphabetic
  • ideographic
  • bottom.

The textAlign property is defaulted to left, and the textBaseline property is defaulted to alphabetic.

The HTML5 canvas API also has strokeText() method: 

context.strokeText("Hello World!", x, y);

This method will color the perimeter of the text not filling it.

To set both the fill and stroke for HTML canvas text, you can use both the fillText() and the strokeText() methods together.

Related Topics