HTML Canvas Text 🎯

Welcome to our comprehensive guide on working with text in HTML Canvas! This tutorial is designed for both beginners and intermediates, so let's get started.

What is HTML Canvas? 📝

HTML Canvas is a powerful HTML5 drawing API that lets you dynamically create graphics, animations, and interactive applications in your web browser.

Creating and Drawing Text on Canvas ✅

Setting Up the Canvas

First, let's create a basic HTML structure with an empty canvas:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Canvas Text</title>
</head>
<body>
    <canvas id="myCanvas" width="500" height="200"></canvas>
    <script src="canvas_text.js"></script>
</body>
</html>

In the example above, we've added a canvas with an id of "myCanvas" and set its width and height. We've also linked an external JavaScript file, canvas_text.js, where we'll write our code.

Drawing Text on Canvas

Now, let's write the JavaScript code to draw text on the canvas:

javascript

// Get the canvas element
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Set the font, color, and text
ctx.font = '20px Arial';
ctx.fillStyle = '#000';

// Set the text to display
const text = 'Hello, World!';

// Measure the width and height of the text
const textWidth = ctx.measureText(text).width;
const textHeight = ctx.font.split(' ')[0];

// Calculate the position of the text (center alignment)
const x = canvas.width / 2 - textWidth / 2;
const y = canvas.height / 2;

// Draw the text on the canvas
ctx.fillText(text, x, y);

In this example, we first get the canvas and its context. Then, we set the font, color, and text. After measuring the width and height of the text, we calculate its position to center it on the canvas. Finally, we draw the text using the fillText method.

💡 Pro Tip: You can change the font, color, text, and position of the text to suit your needs!

Writing Text on a Specific Position 📝

If you want to write text at a specific position, you can simply set the x and y coordinates:

javascript

// Draw the text at (50, 50)
ctx.fillText(text, 50, 50);

Aligning Text 📝

You can align text by using various options in the textAlign and textBaseline properties:

javascript

// Align the text to the left, middle, and right of the canvas
ctx.textAlign = 'left';
ctx.fillText(text, 50, 50);

ctx.textAlign = 'center';
ctx.fillText(text, canvas.width / 2, 50);

ctx.textAlign = 'right';
ctx.fillText(text, canvas.width - 50, 50);

// Align the text to the top, middle, and bottom of the text
ctx.textBaseline = 'top';
ctx.fillText(text, 50, 50);

ctx.textBaseline = 'middle';
ctx.fillText(text, 50, 75);

ctx.textBaseline = 'bottom';
ctx.fillText(text, 50, 100);

Wrapping Text 📝

By default, the fillText method does not wrap the text. If you want to wrap text, you'll need to use the wrapText method:

javascript

const lineHeight = ctx.font.split(' ')[0];
const lines = text.split('\n');
const maxWidth = canvas.width - 50;
let y = 50;

lines.forEach((line, index) => {
    const words = line.split(' ');
    let x = 50;

    words.forEach((word, index) => {
        const wordWidth = ctx.measureText(word).width;
        if (x + wordWidth > maxWidth) {
            x = 50;
            y += lineHeight;
        }
        ctx.fillText(word, x, y);
        x += wordWidth + 10;
    });
});

In this example, we split the text into lines and words. For each line and word, we measure the width and check if it exceeds the maximum width. If it does, we move to the next line, and if not, we draw the word.

Quiz 🎯

By the end of this tutorial, you should be able to create, draw, and manipulate text on HTML Canvas. Happy coding! 🎉