Create Multiple Textures from 2D Canvas


What I’m trying to do is take some long 2D canvas text that is wider than my WebGL canvas, cut it into pieces that have the same dimensions of the canvas, then “stitch” the pieces together as textures onto the WebGL canvas.

Here’s my demo: Scroller Prototype

The bottom div shows the 2D canvases stitched together without putting them onto textures and then onto a WebGL canvas. So I know that the cutting is happening correctly. Now, I want the first texture to contain the beginning of the text and the second texture to contain the end of the text. But they both seem to contain the end of the text as you can see in the scrolling text. First one texture scrolls by, then the other.

Can anyone see where the problem lies?