Question

I have a pretty nice graph going in canvas right now, but I’m hitting a wall with labeling my axes.

I can’t find information on how to place/write text in my canvas. The graph is based on the size of all the content, so I can’t preset everything or just use a background image.

There are two different ways I need to place text:

1. Right justified at a location (x,y) so that the labels on the left
   side line up with the graph border.
2. Centered at a location (x,y) for the labels on the bottom of my
   graph as well as a few data points written on the graph.

So, how can I draw text in my canvas? Or am I going the wrong direction, and need put the text in seperate block elements and absolute position them in CSS?

Answer 1

I ended up using the fillText() command.

context.fillStyle = "#444444"; // set color
context.font = "normal normal 14px Helvetica"; // set font weight, size, etc
context.textBaseline = "middle"; // how to align the text vertically
context.textAlign = "end"; // how to align the text horizontally
context.fillText("test1", 50, 50); // text, x, y

For text that is centered, just change the textAlign to “center”.