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)