Hi,
My first WebGL project is to build a horizontal text scroller. I’ve figured out that I need to draw the text on a 2D canvas and then create a WebGL texture from that. So far, so good.
I’m having trouble figuring out the scrolling part though, especially since the length of my text will be unknown since the text will be dynamic. My initial idea was to use the measureText function to determine the length of the text, then use that to size the 2D canvas.
It doesn’t work how I was expecting. When I do this,
var width = context2D.measureText(text).width;
context2D.canvas.width = width;
the text gets much smaller than I had originally set it to be.
Supposing I get that to work, the next step would be to place the 2D canvas at the right edge of the WebGL canvas, then slowly translate it to the left. I’m also having difficulty figuring out how to position it at the right edge.
If both the WebGL canvas and the 2D canvas use the same background color, my idea is that the text should look like it is the only thing moving. So you won’t see a square box moving across. I’ve set the background colors to be different so that you can more easily see what is happening. Here’s a link to my demo - http://c759787.r87.cf2.rackcdn.com/Scroller2.html
Any ideas on how to make this work? And if there’s an easier or better way, please let me know what that is.
Thx.