Write vertical text on canvas

Question

CANVAS:

y
a
x
i
s 
 x axis

How can I write on a canvas vertically? Ex: the text yaxis.

Answer 1

There is no built-in way, so you'd have to devise a solution. I'd write a function that takes in the string and space between characters, then print each one, incrementing the vertical positioning.

An alternative that would be much easier, would be rotating the canvas 90 degrees then draw the text, but that may not be what you're looking for.

Sample code (from codepen):

CanvasRenderingContext2D.prototype.fillVerticalText = 
  function(text, x, y, verticalSpacing) {
    for (var i = 0; i < text.length; i++) {
      this.fillText(text[i], x, y + i * verticalSpacing);
    }
  }