Question

I am trying to convert a string to words, and then print these using javascript and html5 canvas. The string can be any length, but I am using 50 as a max value of words (separated by a space). Right now I have the following to create the array:

var wordArray = kstring.split(" ", 50);

for(var k = 0; k < wordArray.length; k++)
{
    if(typeof wordArray[k] == 'undefined')
        wordArray[k] = " .";
}

and then print using:

        ctx.fillText(wordArray[0] + " " + wordArray[1] + " " + wordArray[2] + " " + wordArray[3] + " " + wordArray[4], leftOffset, txtHeight);
        ctx.fillText(wordArray[5] + " " + wordArray[6] + " " + wordArray[7] + " " + wordArray[8] + " " + wordArray[9], leftOffset, txtHeight+20);

etc.

However, when the text prints, any undefined values print as “undefined” instead of ” .” It seems that I am going about checking for the undefined value the wrong way, but I’m not sure what else to try.

Additionally, if anyone has any better suggestions for how to achieve this goal (convert a string to words and then print 5 words at a time). Please feel free to suggest some better options.

Thanks

Answer 1

There won’t be any undefined values in the array returned by .split(). You’re getting undefined because your print code has hardcoded indexes higher than the highest index in the array.

Sorry, I don’t have time right now to test this, or explain it beyond mentioning that .slice() creates a new array extracting a range from the source array, and .join() is (obviously) the opposite of .split(), but maybe you could try something like this:

var wordArray = kstring.split(" ", 50),
    i, h, l
    wordsPerLine = 5,
    lineHeight = 20;

for (i=0, h=0, l=wordArray.length; i < l; i+=wordsPerLine, h+=lineHeight) {
   ctx.fillText( wordArray.slice(i, Math.min(l, i+wordsPerLine)).join(" "),
                 leftOffset, txtHeight + h);
}