[Solved] HTML5 Column of Letters [closed]

by


The steps you need to do are as follows:

  • Iterate each char of the string
  • use fillText (or strokeText) to draw the char at the position you want
  • Increment height for each char.

Example

var ctx = document.querySelector("canvas").getContext("2d"),  // get context of canvas
    str = "H E L L O",
    char, i = 0, len = str.length,
    x = 10, y = 30, height = 24;

ctx.font = "bold 24px sans-serif"; // set a font for text

while(i < len) {
  char = str.substr(i++, 1);       // get a char from string at index i
  ctx.fillText(char, x, y);        // draw to canvas at (x, y)
  y += height;                     // increment y with height
}
<canvas width=50 height=250></canvas>

Note that font-height is not the same as font size, so make a good guess for it (TextMetics is suppose to implement this (ascend+descend) but not all browsers are there yet).

3

solved HTML5 Column of Letters [closed]