How to Draw Text on A Canvas Element?

Best Art Supplies for Canvas Drawing to Buy in October 2025

1

Color More 175 Piece Deluxe Art Set with 2 Drawing Pads, Acrylic Paints, Crayons, Colored Pencils, Paint Set in Wooden Case, Professional Art Kit, Art Supplies for Adults, Teens and Artist, WoodMuse Plus

BUY & SAVE

$29.99 $46.99

Save 36%

2

Crayola Air Dry Clay (5lbs), Teacher Supplies, Natural White Modeling Clay for Kids, Sculpting Material, Bulk Craft Supplies, School Classroom Must Haves

BUY & SAVE

$11.24 $13.99

Save 20%

3

Caliart 176PCS Art Supplies Sketching Kit with 100 Sheets 3-Color Sketch Book, Graphite Colored Charcoal Watercolor & Metallic Pencils, School Supplies Gifts for Artists Adults Teens Girls Boys Kids

BUY & SAVE

$25.99

4

KALOUR 72 Count Colored Pencils for Adult Coloring Books, Soft Core,Ideal for Drawing Blending Shading,Color Pencils Set Gift for Adults Kids Beginners

BUY & SAVE

$12.99

5

Fuxi 9" x 12" Sketch Book, Top Spiral Bound Sketch Pad, 100 Sheets 68lb/100gsm Acid-Free Drawing Paper, Art Sketchbook for Drawing Pad for Kids Artists & Beginners Professional Art Supplies for Adults

BUY & SAVE

$11.99 $14.59

Save 18%

6

Muchcute Micro Fineliner Drawing Art Pens: 12 Black Fine Line Waterproof Ink Set Artist Supplies Archival Inking Markers Liner Sketch Outline Anime Gifts Manga Sketching Watercolor Zentangle Kit Stuff

BUY & SAVE

$9.99 $11.99

Save 17%

7

ARTISTRO Acrylic Paint Markers for Rock, Fabric, Wood, Glass, Craft - 24 Quick Dry Dual-Tip Paint Pens for Halloween Decorations - Pumpkin Painting Kit, Drawing Markers, Art Supplies, Christmas Gift

BUY & SAVE

$12.99

+

ONE MORE?

To draw text on a canvas element, you can follow these steps:

1. Get a reference to the canvas element in your HTML document using JavaScript:

const canvas = document.querySelector('canvas');

1. Get the 2D rendering context of the canvas:

const context = canvas.getContext('2d');

1. Set the font properties for the text:

const font = '24px Arial'; // Example font and size context.font = font;

1. Set the text alignment (optional):

context.textAlign = 'center'; // Possible values: 'center', 'start', 'end', 'left', 'right'

1. Set the fill color for the text:

context.fillStyle = 'black'; // Any valid CSS color value

1. Use the fillText() method to draw the text on the canvas. Specify the text content and its position (x and y coordinates):

const x = canvas.width / 2; // Example: horizontally center the text const y = canvas.height / 2; // Example: vertically center the text const text = 'Hello, World!'; // Your desired text context.fillText(text, x, y);

Note: You can also use the strokeText() method instead of fillText() to create an outline of the text if desired.

That's it! The canvas should now display the specified text at the desired position. Remember to ensure the canvas element has appropriate dimensions in your HTML, either by setting the width and height attributes or via CSS.

What is the difference between fillText() and strokeText() methods in canvas?

The fillText() method is used to draw filled text on the canvas. It takes a specified text and draws it using the current font, size, and style settings. The text is filled with the current fill color.

On the other hand, the strokeText() method is used to draw outlined text on the canvas. It takes a specified text and draws it using the current font, size, and style settings. The text is outlined with the current stroke color.

In summary, fillText() fills the text with a solid color, while strokeText() only outlines the text with a color.

What is the default text direction for canvas text?

The default text direction for canvas text is left-to-right.

How to align text to the left on a canvas?

To align text to the left on a canvas, you can use the textAlign() and text() functions in p5.js (a JavaScript library for creative coding).

Here's an example of how to align text to the left on a canvas using p5.js:

function setup() { createCanvas(400, 200); }

function draw() { background(220);

// Set text alignment to left textAlign(LEFT);

// Display text at (x: 20, y: 100) aligned to the left text("Hello, world!", 20, 100); }

In this example, the textAlign() function is used to set the text alignment to LEFT. Then, the text() function is used to display the text "Hello, world!" at the specified (x, y) coordinates, which in this case is (20, 100). Since the text alignment is set to left, the text will be aligned to the left at that position on the canvas.

What is the syntax for writing text on a canvas in JavaScript?

To write text on a canvas in JavaScript, you can use the fillText() method. The syntax for writing text on a canvas is as follows:

context.fillText(text, x, y);

Here, context refers to the context of the canvas, which is obtained using the getContext() method. The text parameter is the actual text you want to write on the canvas. The x and y parameters specify the coordinates where you want to position the text.

Here's an example that demonstrates how to use the fillText() method to write text on a canvas:

const canvas = document.getElementById('myCanvas'); const context = canvas.getContext('2d'); context.font = '20px Arial'; context.fillText('Hello, World!', 50, 50);

In this example, the canvas with an id of 'myCanvas' is obtained using getElementById(). Then, the context of the canvas is obtained using getContext('2d'). The font property is set to specify the font size and style of the text. Finally, the fillText() method is used to write 'Hello, World!' at coordinates (50, 50) on the canvas.

How to create a transparent text on a canvas?

To create a transparent text on a canvas, you can use the GlobalCompositeOperation property and set it to destination-out on the canvas context. Here's an example:

// Get the canvas element const canvas = document.getElementById('canvas');

// Get the canvas context const ctx = canvas.getContext('2d');

// Set the canvas size canvas.width = 500; canvas.height = 300;

// Set the background color ctx.fillStyle = 'lightgray'; ctx.fillRect(0, 0, canvas.width, canvas.height);

// Set the text properties ctx.font = '48px Arial'; ctx.fillStyle = 'black';

// Set the global composite operation to 'destination-out' ctx.globalCompositeOperation = 'destination-out';

// Create a transparent text ctx.fillText('Hello World', 100, 100);

This code first sets up the canvas, including the size and background color. Then, it sets the text properties such as font size and color. Next, it sets the globalCompositeOperation to destination-out, which helps create transparency. Finally, it uses the fillText method to draw the text with the desired position.

By using destination-out, the text will act as a mask on the canvas. Anything that overlaps with the text will be transparent, revealing the background color or anything else drawn before.

How to make text bold on a canvas?

To create bold text on a canvas, you can use the HTML5 canvas element and the JavaScript getContext("2d") method to draw and style text. Here's an example code snippet that shows how to create bold text on a canvas:

HTML:

JavaScript:

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

ctx.font = "bold 20px Arial"; ctx.fillText("Hello World!", 50, 50);

In the above code, we first get a reference to the canvas element using its ID. Then we get the 2D rendering context of the canvas using the getContext("2d") method.

We set the font style using the font property, where we specify the font weight as "bold" and the font size as "20px Arial".

Finally, we use the fillText() method to draw the text "Hello World!" at the position (50, 50) on the canvas. Since we set the font style to bold, the text will appear bold on the canvas.