Help with wrapping text in canvas 2nd line dissappears

So I am working on building the Wikipedia API and trying to get the text it pulls to write itself on the screen in a human like fashion. After doing some googling I found a bit of code that does this, but it ran off the canvas window and out of site.

So then I found another snippet of code to make the text wrap around by basically increasing the y argument in fillText method and combined it to the previous code and it will now wrap around the screen. The problem I am having is that after the second row is done writing it dissappears and moves to the third row and I’m trying to figure out how to make it stay there.

I think it may have something to do with the setTransform() call but am not really sure what to do at this point so any advice would be awesome!

okay so i narrowed it down to the fill rectangle method, apperently it was erasing everything but the top layer when it was called. but now the first letter is fading on me in each new line

It looks like the first letter of the new line is being drawn twice, and it splits in the middle of the word? Is this the expected behavior?

Note that in CodePen in the little dropdown menu on the upper-right of the editors there is an option to ‘Tidy’ up your code. That will likely help you debug things, I had to click it to see what was going on.

The faded first letter of the second line can be removed by deleting/commenting out line 48: ctx.fillText(txt[i], x, y); // fill final letter

1 Like

no i suppose it should split with whole words but awesome catch i guess i need to figure that out as well. thanks for the advice!