CODEWITHSUNDEEP
javascripthtml5-canvas
Pete
Pete

Reputation: 489

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.

Upvotes: 4

Views: 10718

Answers (3)

user14922900
user14922900

Reputation: 1

Just type the text horizontally and press enter after each letter it will go vertical

Upvotes: 0

Joshua Subayar
Joshua Subayar

Reputation: 1

Yeah don’t listen to them, that’s real complicated, type what you tryna type... then resize the text box to being thin in width, and it’ll push the letters down vertically

Upvotes: -2

Rob Brander
Rob Brander

Reputation: 3781

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

Upvotes: 5

Related Questions