How to Draw a Text String Using the HTML Canvas Element

The HTML <canvas> element is a powerful tool for rendering 2D graphics, including text strings, directly within a web browser. By using JavaScript and the CanvasRenderingContext2D API, you can customize and draw text with precision.

Steps to Draw Text on a Canvas

Add a <canvas> Element Include a <canvas> tag in your HTML with specified dimensions.
Access the 2D Rendering Context Use the getContext('2d') method to interact with the canvas.
Draw the Text Utilize methods like fillText() or strokeText() to render text on the canvas.

Example Code

html

1234567891011121314151617181920212223242526272829303132333435363738

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Canvas Text Example</title>
  </head>
  <body>
    <canvas
      id="textCanvas"
      width="400"
      height="200"
      style="border:1px solid black;"
    ></canvas>

    <script>
      const canvas = document.getElementById('textCanvas');
      const ctx = canvas.getContext('2d');

      // Set font properties
      ctx.font = '24px Arial';
      ctx.fillStyle = 'blue';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';

      // Draw filled text
      ctx.fillText('Hello, Canvas!', canvas.width / 2, canvas.height / 2);

      // Optional: Draw outlined text
      ctx.strokeStyle = 'red';
      ctx.strokeText(
        'Outline Example',
        canvas.width / 2,
        canvas.height / 2 + 30
      );
    </script>
  </body>
</html>

Key Methods for Drawing Text

fillText(text, x, y [, maxWidth])

Draws filled text at the specified coordinates.
Example: ctx.fillText('Hello', 50, 50);

strokeText(text, x, y [, maxWidth])

Draws outlined text at the specified coordinates.
Example: ctx.strokeText('Outline', 50, 100);

Additional Customizations

1. Font Settings

Customize the font using the font property:

Example: ctx.font = 'italic bold 20px Verdana';

2. Text Alignment

Adjust alignment with textAlign(start, end, center, left, right).

3. Text Baseline

Set the baseline using textBaseline(top, middle, alphabetic, etc.).

4. Colors and Styles

Use fillStyle and strokeStyle for colors.

Conclusion

The HTML <canvas> element and its fillText() and strokeText() methods provide an effective way to render and style text strings. With customizable options like fonts, colors, and alignment, you can create stunning visuals tailored to your application’s needs.

How to Draw a Text String Using the HTML Canvas Element

Steps to Draw Text on a Canvas

Key Methods for Drawing Text

Additional Customizations

Conclusion

More from javascript