Adding Text to the Canvas

The Canvas API provides methods for rendering text directly onto the canvas element. You'll primarily use the fillText() and strokeText() methods to achieve this. fillText() draws filled text, while strokeText() draws only the outline of the text.

To use these methods, you first need to get a reference to the 2D rendering context of the canvas.

 const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    ctx.fillText('Hello Canvas!', 50, 50); // Text, x coordinate, y coordinate
    ctx.strokeText('Stroked Text', 50, 100); // Text, x coordinate, y coordinate 

Customizing Text Appearance: Font, Size, and Style

The font property of the 2D rendering context controls the font family, size, and style of the text. It accepts a string value similar to CSS font declarations.

 ctx.font = '20px Arial'; // Size and Font Family
    ctx.fillText('Arial Font', 50, 150);

    ctx.font = 'bold 30px Serif'; // Bold, Size, and Font Family
    ctx.fillText('Bold Serif Font', 50, 200);

    ctx.font = 'italic 24px "Times New Roman"'; // Italic, Size, and Font Family
    ctx.fillText('Italic Times New Roman', 50, 250); 

Text Alignment

The textAlign and textBaseline properties control the alignment of text relative to its specified coordinates. textAlign handles horizontal alignment, and textBaseline handles vertical alignment.

Possible values for textAlign:

• start (default): Text starts at the specified x coordinate.
• end: Text ends at the specified x coordinate.
• left: Text is left-aligned to the specified x coordinate.
• right: Text is right-aligned to the specified x coordinate.
• center: Text is centered on the specified x coordinate.

Possible values for textBaseline:

• top: Text's top edge is aligned with the specified y coordinate.
• hanging: Text's hanging baseline is aligned with the specified y coordinate.
• middle: Text is vertically centered on the specified y coordinate.
• alphabetic (default): Text's alphabetic baseline is aligned with the specified y coordinate.
• ideographic: Text's ideographic baseline is aligned with the specified y coordinate.
• bottom: Text's bottom edge is aligned with the specified y coordinate.

 ctx.font = '20px Arial';

    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('Centered Text', canvas.width / 2, 50); // Center of the Canvas 

Dynamic Text Effects

You can create dynamic text effects by manipulating the fillStyle, strokeStyle, shadowColor, shadowBlur, shadowOffsetX, and shadowOffsetY properties. You can also combine text with other canvas elements and animations to produce more complex effects.

 ctx.font = '30px Impact';
    ctx.fillStyle = 'red';
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 3;

    // Shadow
    ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
    ctx.shadowBlur = 5;
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 5;


    ctx.fillText('Shadow Text', 50, 50);
    ctx.strokeText('Shadow Text', 50, 50);

    // Gradient Fill
    const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
    gradient.addColorStop(0, 'blue');
    gradient.addColorStop(1, 'green');
    ctx.fillStyle = gradient;
    ctx.fillText('Gradient Text', 50, 100);

    ctx.shadowColor = null; // Remove shadow for the next draw
    ctx.shadowBlur = 0;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;