I am currently working on creating a plane using three.js and applying a texture to it. The texture itself is generated from a canvas element.
Interestingly, I have encountered some compatibility issues with Firefox specifically, as other browsers like IE11 seem to be functioning properly.
Below are example screenshots of how the texture appears in Firefox and Chrome:
Firefox example screenshot
https://i.sstatic.net/J1dIF.png
Chrome example screenshot
https://i.sstatic.net/8yL0E.png
Here is the code snippet that I've used for this project:
// Retrieving text data
var text1 = container.getAttribute('data-text-1');
var text2 = container.getAttribute('data-text-2');
// Creating canvas image
var bitmap = document.createElement('canvas');
bitmap.width = 4000;
bitmap.height = 1200;
var ctx = bitmap.getContext('2d');
// Drawing text on canvas
ctx.strokeStyle="#fff";
ctx.lineWidth = 200;
ctx.strokeRect(0,0,4000,1200);
ctx.font = 'normal 300px proxima_novabold';
ctx.fillStyle = '#fff';
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(text1, 2000, 450);
ctx.font = 'normal 240px proxima_novaregular';
ctx.fillText(text2, 2000, 750);
// Using canvas content as texture
var texture = new THREE.Texture(bitmap);
texture.premultiplyAlpha = false;
texture.needsUpdate = true;
// Creating plane mesh
plane = new THREE.Mesh(
new THREE.PlaneGeometry(2000, 600, 80, 80),
new THREE.MeshBasicMaterial({ color: 0xffffff, map: texture, side: THREE.DoubleSide})
);
scene.add( plane );