Pete Pete - 1 month ago 8
Javascript Question

Write vertical text on canvas

CANVAS:

y
a
x
i
s
x axis


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

Answer

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);
    }
  }
Comments