Skip to content

How to write text into to an HTML canvas

Set the canvas size using CSS or the HTML width/height attributes to be, for example, 200 x 400:

<canvas width="200" height="400"></canvas>

and make sure you also set the width/height properties of the canvas object in the JavaScript, to avoid the text to render blurry, for example:

canvas.width = 1800
canvas.height = 1200

First thing, get a reference to a canvas

const canvas = document.querySelector('canvas')

and create a context object from it:

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

Now we can call the fillText() method of the context object:

context.fillText('hi!', 100, 100)

Make sure the x and y coordinates of the starting point are included in the canvas size.

You can pass additional properties before calling fillText() to customize the appearance, for example:

context.font = 'bold 70pt Menlo'
context.fillStyle = '#ccc'
context.fillText('hi!', 100, 100)

→ Here's my latest YouTube video

→ Get my JavaScript Beginner's Handbook

→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter

JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025

Bootcamp 2025

Join the waiting list