Using a Canvas as a three.js Texture: Text Not Showing Above a Certain Size
canvas, html5-canvas, three.js, webgl
Solution
This is odd indeed. It looks like some texture caching / syncing issue on Chrome side, somewhere in the code handling 2d canvas => WebGL texture conversion.
If you add some canvas drawing operation after drawing the text, it works again even with 257 pixel sized canvas:
http://jsfiddle.net/sSD65/28/
So it seems what's going on is that with canvas size > 256 Chrome uses a state of 2d canvas from before rendering the text for creating WebGL texture.
I would guess it tries to optimize WebGL texture uploads for larger canvases and some "dirty" flag is not set properly for "context.fillText" operation.
Problem
I've been experimenting with three.js recently, but I've hit a show stopper that occurs when the size of a canvas that is used as a texture is above 256x256. Here's some example code that demonstrates what's happening: http://jsfiddle.net/sSD65/26/ Notice that when `size = 256`, the canvas and its contents are rendered correctly on all faces of the cube. This is also the case when `size < 256`. However, as soon as `size > 256`, the border of the canvas is rendered on all faces of the cube but the text is mysteriously left out. Example of what happens when `size = 257`: http://jsfiddle.net/sSD65/27/ I just can't understand why the graphical part of the canvas is being rendered on the cube but not the textual part. Is this a bug in three.js, an issue with canvas or (most likely) am I being stupid? Any ideas?