Categories
JavaScript Answers

How to Set Letter Spacing in Canvas Element with JavaScript?

Spread the love

To set Letter spacing in canvas element with JavaScript, we can set the canvas element’s style.letterSpacing property.

For instance, we can write:

<canvas style='width: 300px; height: 300px'></canvas>

to add the canvas element.

Then, we write:

const can = document.querySelector('canvas');
const ctx = can.getContext('2d');
can.width = can.offsetWidth;
ctx.clearRect(0, 0, can.width, can.height);
can.style.letterSpacing = '10px'
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = '4em sans-serif';
ctx.fillText('Hello', can.width / 2, can.height * 1 / 4);

can.style.letterSpacing = '30px'
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = '4em sans-serif';
ctx.fillText('World', can.width / 2, can.height * 3 / 4);

to get the canvas with document.querySelector.

Then we get the canvas context with getContext.

Next, we set the can.style.letterSpacing to set the letter spacing we want for our text.

We also, set the textAlign, textBaseline, and font properties to set the font style we want.

Finally, we call fillText to draw the text onto the canvas.

The arguments are the text, width, and height of the text respectively.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published.