While you can't directly set the letter spacing property in canvas, there is a workaround to achieve wider letter spacing. By incorporating various white spaces between each letter in the string, you can create the desired effect. Here's an example:

ctx.font = "3em sheepsans";
ctx.textBaseline = "middle";
ctx.textAlign = "center";
ctx.fillStyle = "rgb(255, 255, 255)";
var ctext = "Blah blah text".split("").join(String.fromCharCode(8202))
ctx.fillText(ctext, 1024 / 2, 768 / 2);

This code snippet inserts a hair space between each letter.

If you prefer slightly wider spacing, you can use 8201 instead of 8202 to insert a thin space.

For more options on white spaces, refer to this list of Unicode Spaces.

Although this method allows for easier preservation of the font's kerning compared to manually positioning each letter, it doesn't offer the ability to adjust letter spacing more tightly.

The Canvas context does not support setting letter-spacing as a property. To achieve this effect, you will need to manually space out each letter by adjusting the x position for each one. Apologies for any inconvenience.

It's worth noting that you can modify some text properties using ctx.font, but unfortunately letter-spacing is not one of them. The properties that can be adjusted include: "font-style font-variant font-weight font-size/line-height font-family"

For example, you can write

ctx.font = "bold normal normal 12px/normal Verdana"

(or make modifications) and it will be correctly parsed by the context.

To accommodate 'letter kerning pairs' and similar aspects, I have crafted the following solution. It has been designed to consider these factors, and initial testing indicates it functions as intended. For feedback or insights, please refer to my related query on the matter (Adding Letter Spacing in HTML Canvas)

The approach involves utilizing measureText() to ascertain the total width of the string, then removing the first character to measure the remaining string's width. This technique accounts for kerning pairs and related elements. Further details can be found in the provided link.

Below is the specified HTML setup:

<canvas id="Test1" width="800px" height="200px"><p>Your browser does not support canvas.</p></canvas>

Here is the code snippet:

this.fillTextWithSpacing = function(context, text, x, y, spacing)
{
    //Begin at coordinates (X, Y).
    //Calculate wAll, the total string width using measureText()
    wAll = context.measureText(text).width;

    do
    {
        //Remove the first character from the string
        char = text.substr(0, 1);
        text = text.substr(1);

        //Display the initial character at (X, Y) using fillText()
        context.fillText(char, x, y);

        //Determine wShorter, the width of the shortened string using measureText().
        if (text == "")
            wShorter = 0;
        else
            wShorter = context.measureText(text).width;

        //Calculate the kerned width of the character by subtracting the shorter string width from the total string width, wChar = wAll - wShorter
        wChar = wAll - wShorter;

        //Advance X by wChar + spacing
        x += wChar + spacing;

        //Update wAll to wShorter
        wAll = wShorter;

        //Repeat from step 3
    } while (text != "");
}

Demonstration code for testing purposes:

element1 = document.getElementById("Test1");
textContext1 = element1.getContext('2d');

textContext1.font = "72px Verdana, sans-serif";
textContext1.textAlign = "left";
textContext1.textBaseline = "top";
textContext1.fillStyle = "#000000";

text = "Welcome to go WAVE";
this.fillTextWithSpacing(textContext1, text, 0, 0, 0);
textContext1.fillText(text, 0, 100);

It would be ideal to conduct thorough assessment by feeding various random strings and conducting pixel-by-pixel evaluations. Additionally, I am uncertain about the default kerning performance of Verdana, although I've heard it surpasses Arial - recommendations for alternative fonts to test are welcomed.

Thus far, the results appear promising, even flawless. However, I remain open to any critiques or suggestions that may help enhance the process.

In the meantime, I am sharing this information for the benefit of others seeking a solution in this area.

Here is a snippet of CoffeeScript that allows you to apply kerning to your text context:

tctx = tcanv.getContext('2d')
tctx.kerning = 10
tctx.fillStyle = 'black'
tctx.fillText 'Hello World!', 10, 10

The accompanying code for this functionality is as follows:

_fillText = CanvasRenderingContext2D::fillText
CanvasRenderingContext2D::fillText = (str, x, y, args...) ->

  # Default behavior if no kerning is set
  return _fillText.apply this, arguments unless @kerning?

  # Keep track of offset while looping through the text
  offset = 0

  _.each str, (letter) =>

    _fillText.apply this, [
      letter
      x + offset + @kerning
      y
    ].concat args 

    offset += @measureText(letter).width + @kerning

The equivalent JavaScript implementation would be:

var _fillText,
  __slice = [].slice;

_fillText = CanvasRenderingContext2D.prototype.fillText;

CanvasRenderingContext2D.prototype.fillText = function() {
  var args, offset, str, x, y,
    _this = this;

  str = arguments[0], x = arguments[1], y = arguments[2], args = 4 <= arguments.length ? __slice.call(arguments, 3) : [];
  if (this.kerning == null) {
    return _fillText.apply(this, arguments);
  }
  offset = 0;

  return _.each(str, function(letter) {
    _fillText.apply(_this, [letter, x + offset + _this.kerning, y].concat(args));
    offset += _this.measureText(letter).width + _this.kerning;
  });
};

Contrary to popular belief, the letter-spacing property can be applied directly to the canvas element in CSS without any complex workarounds. I just discovered this while working on my own canvas project. For example: canvas { width: 480px; height: 350px; margin: 30px auto 0; padding: 15px 0 0 0; background: pink; display: block; border: 2px dashed brown; letter-spacing: 0.1em; }

Although this question may be old, it still holds relevance today. By building on Patrick Matte's extension of James Carlyle-Clarke's response, a simple yet effective plain-old-Javascript solution can be achieved. The concept involves measuring the space between consecutive characters and making adjustments accordingly, even allowing for negative values.

Below is the heavily commented version of the solution:

function fillTextWithSpacing (context, text, x, y, spacing) {
    // Calculating total width to adjust the starting X position based on text alignment.
    const total_width = context.measureText (text).width + spacing * (text.length - 1);

    // Saving the current text alignment as we temporarily set it to left for drawing purposes.
    const align = context.textAlign;
    context.textAlign = "left";

    // Adjusting X position for different alignments: right, center, or left.
    switch (align) {
        case "right":
            x -= total_width;
            break;
        case "center":
            x -= total_width / 2;
            break;
    }

    // Initializing variables for character tracking and kerning calculation.
    let offset, pair_width, char_width, char_next_width, pair_spacing, char, char_next;

    // Iterating through each character in the text while considering spacing between pairs.
    for (offset = 0; offset < text.length; offset++) {
        char = text.charAt(offset);
        pair_spacing = 0;
        if (offset + 1 < text.length) {
            char_next = text.charAt(offset + 1);
            pair_width = context.measureText(char + char_next).width;
            char_width = context.measureText(char).width;
            char_next_width = context.measureText(char_next).width;
            pair_spacing = pair_width - char_width - char_next_width;
        }

        // Drawing the current character at adjusted X position.
        context.fillText(char, x, y);
        // Advancing X position by accounting for character width, pair spacing, and manual spacing adjustment.
        x += char_width + pair_spacing + spacing;
    }

    // Restoring the original text alignment setting.
    context.textAlign = align;
}

For a demonstration, see below:

The canvas element does not currently support letter spacing.

As a workaround, I have implemented a solution using JavaScript.

const inputValue = $('#sourceText1').val().split("").join(" ");

Alternatively, you can achieve the desired effect by:

const sampleText = "John Doe";
const formattedText = sampleText.split("").join(" ");

When it comes to adjusting line spacing in my text, I take a unique approach by manipulating the y value of each word as I write it out. By looping through a string and splitting it by spaces, I am able to create a vertical alignment effect. Keep in mind that the values I use are specific to the default font style, so adjustments may be necessary if you're working with a different font.

// defining x and y coordinates
var vectors = {'x':{1:100, 2:200}, 'y':{1:0, 2:100}
// capitalize first letter of each word
var newtext = YOURSTRING.replace(/^\b[a-z]/g, function(oldtext) {
    // convert to uppercase
    return oldtext.toUpperCase(); 
});
// split string into array of words
newtext = newtext.split(/\s+/);

// set line height
var spacing = 10 ;
// initial adjustment for positioning
var spaceToAdd = 5;
// iterate over each word and adjust y coordinate based on spacing
for (var c = 0; c < newtext.length; c++) {
    ctx.fillText(newtext[c], vectors.x[i], vectors.y[i] - spaceToAdd);
    // increment spacing for next word
    spaceToAdd += spacing;
}               

Presented here is an alternative approach inspired by James Carlyle-Clarke's earlier solution. This method also allows for adjusting text alignment to left, center, or right.

function formatTextWithSpacing(ctx, txt, posX, posY, spc, alignTxt) {
    const totalW = ctx.measureText(txt).width + spc * (txt.length - 1);
    switch (alignTxt) {
        case "right":
            posX -= totalW;
            break;
        case "center":
            posX -= totalW / 2;
            break;
    }
    for (let i = 0; i < txt.length; i++) {
        let character = txt.charAt(i);
        ctx.fillText(character, posX, posY);
        posX += ctx.measureText(character).width + spc;
    }
}

When using Chrome, Edge, and Firefox:

You can set the ctx.letterSpacing to "2px"

Unfortunately, Safari does not support this feature

For more information, you can visit this link