#Canvas texture added to mesh always has black background

5 messages · Page 1 of 1 (latest)

verbal briar
#

I'm trying to add canvas with text on existing mesh that already has a texture. But no matter what, I always getting black background instead of transparent.

my current canvas init.

function canvasTexture() {
    const canvas = document.createElement('canvas');
    canvas.width = 1276;
    canvas.height = 295;

    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.font = '48px serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillStyle = 'red';
    ctx.fillText('Hello world', 300, 150);
    const canvasTxt = new THREE.CanvasTexture(canvas);
    canvasTxt.needsUpdate = true;
    return canvasTxt;
}

And my result always black background with red text. I can change color of that backgorund(by setting ctx.fillRect and fillStyle, but it does not recognise alpha channel on fillStyle = "rgba(0,0,0,0,)).

Maybe someone has any ideas?
I'm using Three js fiber and alpha is true there on renderer.

image.png
heady vector
#

My knowledge on this is limited so I’m not sure if this helps but worth a try. Try setting the position of the canvas as absolute (CSS style).

heady vector
#

@verbal briar

verbal briar
#

thanks, but that didn't helped. finally decided to use text together with image, so instead of black background I've got text with image