How to draw text on canvas in JavaScript

To start drawing text on a canvas, you first need to get a reference to your HTML canvas element. That’s typically done using the getElementById method. Once you have the canvas, you can set its width and height to define the area where you’ll be drawing.

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 600;

Next, you’ll want to ensure that the canvas is properly set up for drawing. The 2D rendering context provides various methods and properties for drawing shapes, images, and text. It’s essential to call getContext("2d") as this will allow you to use the API designed for 2D graphics.

For placing text specifically, you might also want to configure some initial parameters like text alignment and baseline. This helps ensure that the text appears exactly where you want it on the canvas.

ctx.textAlign = "center";
ctx.textBaseline = "middle";

After setting up the canvas and its context, you can begin drawing text. It’s possible to use the fillText method to render the text onto the canvas. This method requires you to specify the text string you want to draw, along with the x and y coordinates where the text should appear.

ctx.fillText("Hello, Canvas!", canvas.width / 2, canvas.height / 2);

With these foundational steps, you’ll be ready to dive deeper into manipulating text properties. The next step will involve understanding how to use the canvas text API, which provides additional functionalities for enhancing your drawn text, such as setting fonts and creating shadows.

Understanding the canvas text API

The canvas text API allows you to customize the appearance of your text significantly. One of the primary methods you’ll use is font, which allows you to set the font size and family for your text. The format you need to follow is similar to CSS, where you specify the size and typeface.

ctx.font = "24px Arial";

Once you’ve set the font, you can control the color of your text using the fillStyle property. This property takes a string that represents a color, which can be in the form of hex, RGB, or named colors.

ctx.fillStyle = "blue";

After setting your desired font and color, you can render your text using the fillText method as mentioned earlier. If you want to add more flair to your text, think using shadows. The canvas API provides properties like shadowColor, shadowBlur, shadowOffsetX, and shadowOffsetY to create shadow effects.

ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;

Once the shadow properties are set, you can draw the text again, and it will appear with a shadow effect, giving it a more three-dimensional look. That’s particularly useful for making text stand out against a busy background.

ctx.fillText("Hello, Canvas with Shadow!", canvas.width / 2, canvas.height / 2);

In addition to shadows, you can also explore the strokeText method, which allows you to outline the text instead of filling it. This method can be useful for creating a different visual effect and can be styled similarly with the strokeStyle property.

ctx.strokeStyle = "red";
ctx.lineWidth = 2;
ctx.strokeText("Outlined Text", canvas.width / 2, canvas.height / 2);

Combining these properties and methods will enable you to create visually appealing text on your canvas. The next aspect to focus on is positioning the text with precision, ensuring that it aligns perfectly with your desired layout.

Styling text with fonts and colors

Fonts on the canvas are set using the font property, which accepts a string that mimics CSS font declarations. This means you can specify font weight, size, family, and even style in a single line. For example:

ctx.font = "bold 36px 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif";

If you want to include multiple font families as fallbacks, separate them with commas just like in CSS. The browser will use the first available font in the list. This especially important for ensuring consistent appearance across different systems.

Color styling is handled primarily through fillStyle for filled text and strokeStyle for outlines. Both accept any valid CSS color format, including named colors, hex, rgb/rgba, hsl/hsla, gradients, and even patterns.

ctx.fillStyle = "#FF5733";       // Hexadecimal color
ctx.strokeStyle = "rgba(0,0,0,0.7)"; // Semi-transparent black for outlines

Gradients and patterns can add sophisticated effects. To create a gradient fill, use the createLinearGradient or createRadialGradient methods, then add color stops. For example:

const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(0.5, "yellow");
gradient.addColorStop(1, "green");
ctx.fillStyle = gradient;
ctx.font = "48px Arial";
ctx.fillText("Gradient Text", 50, 100);

Shadow properties can be leveraged to make text pop. Remember that shadows apply to both fillText and strokeText. Adjusting shadowBlur changes the softness of the shadow, while shadowOffsetX and shadowOffsetY control its position relative to the text.

ctx.shadowColor = "rgba(0, 0, 0, 0.3)";
ctx.shadowBlur = 4;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;

ctx.fillStyle = "navy";
ctx.font = "bold 40px Georgia";
ctx.fillText("Shadowed Text", 100, 200);

One subtlety to note: shadows can sometimes cause blurriness, especially on low-resolution canvases. Increasing the canvas resolution (using devicePixelRatio) can help maintain crispness.

For more complex styling, you can combine fills and strokes to outline filled text, giving it depth and definition. Here’s an example that draws filled text with a contrasting colored outline:

ctx.font = "60px Impact";
ctx.fillStyle = "yellow";
ctx.strokeStyle = "black";
ctx.lineWidth = 5;

const text = "Outlined & Filled";
const x = canvas.width / 2;
const y = canvas.height / 2;

ctx.textAlign = "center";
ctx.textBaseline = "middle";

ctx.fillText(text, x, y);
ctx.strokeText(text, x, y);

Keep in mind that the order of drawing matters. You generally want to fill first and then stroke, or vice versa depending on the effect you’re after. Strokes can obscure fills if the line width is excessively large.

Additionally, you can dynamically load and use custom fonts with the CSS @font-face rule or the Font Loading API, which then become available to the canvas just like system fonts. This opens up endless possibilities for branding and style.

When working with colors and fonts, it’s always a good idea to test on multiple devices and browsers. Canvas rendering can vary slightly, especially with font smoothing and anti-aliasing, which affects how your text ultimately looks.

Once you have your fonts and colors dialed in, the next challenge is positioning your text with pixel-perfect accuracy. This involves understanding the coordinate system, alignment properties, and how text metrics can guide you to place text exactly where you want it.

Positioning text with precision

To achieve precise positioning of text on your canvas, it’s crucial to understand the coordinate system used by the HTML5 canvas. The origin (0, 0) is located at the top-left corner of the canvas, with the x-coordinate increasing to the right and the y-coordinate increasing downward. This means that when you specify coordinates for your text, you need to account for this orientation.

Text alignment settings further influence how text is positioned relative to the specified coordinates. The textAlign property can take values like “left”, “right”, “center”, or “start” and “end”. This property determines how the text is aligned horizontally with respect to the x-coordinate you’ve provided.

ctx.textAlign = "right"; // Aligns text to the right of the specified x-coordinate
ctx.fillText("Right Aligned", canvas.width - 10, 50);

Similarly, the textBaseline property controls the vertical alignment of the text. It can take values such as “top”, “hanging”, “middle”, “alphabetic”, “ideographic”, and “bottom”. Understanding these baselines will help you place the text exactly where you want it vertically.

ctx.textBaseline = "bottom"; // Aligns the bottom of the text with the specified y-coordinate
ctx.fillText("Bottom Aligned", 100, canvas.height - 10);

For even more control over positioning, you can calculate the text width and height using the measureText method. This method returns a TextMetrics object containing the width of the text, which you can use to adjust your positioning dynamically.

const text = "Measured Text";
const metrics = ctx.measureText(text);
const textWidth = metrics.width;

// Centering text
const x = (canvas.width - textWidth) / 2;
const y = canvas.height / 2;

ctx.fillText(text, x, y);

Using measureText is particularly useful when you need to position text based on its size, such as centering it within a specific area or aligning it next to other elements on the canvas. Keep in mind that the height of the text is not directly provided, but you can estimate it based on the font size.

For more complex layouts, you might find it helpful to create a utility function that handles text positioning based on alignment parameters. This function can take the desired alignment and coordinates, calculate the necessary adjustments, and draw the text accordingly.

function drawAlignedText(ctx, text, x, y, align = "left", baseline = "alphabetic") {
    ctx.textAlign = align;
    ctx.textBaseline = baseline;
    ctx.fillText(text, x, y);
}

// Usage
drawAlignedText(ctx, "Custom Aligned Text", 50, 100, "center", "middle");

Finally, remember to consider how text will be rendered on different devices and resolutions. High-DPI screens may require adjustments to your positioning calculations to ensure crisp rendering and accurate alignment. It’s often beneficial to test your canvas on various devices to fine-tune these parameters.