Vertical text on charting using html5 canvas

Question

I am developing chart PoC with HTML5 canvas.

the each text AA, BB and so on are all canvas. I am generating them by hvar canvas = $("<canvas></canvas>").appendTo(elementDiv); and using loop to display the text.

I am using ctx.fillText(txt, x - txt.length * 2, 18); to display the text.

Here, my question is how to make them as vertical text.

Answer 1

To turn the text into vertical text, you simply use the rotate method to apply a rotate transform to your canvas:

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations#Rotating

You might also need the translate transform to correctly position your text after rotation, play around with transforms until you figure out how they work (you can skip this step if you know your matrices)