Is there any way of making a canvas sprite, and adding to the sprite some background color at the same moment?

Hello everyone, how are you all doing?

I tried already a lot of approaches that I found here, but I couldn’t get whats I want.
I have a Sprite that has a canvas as its texture. But, this canvas renders a graphic, and it is a png graphic, so it’s hard to see if it is at some point that the colors of the lines are the same at the point’s color. I couldn’t also draw borders to this canvas, I really don’t know why…

This image is also a link to a live example.

So I would like to have this sprite with a background color, that could be light blue for example…

Two other things using this same context: Is there any way to connect this graphic to the cube? Like with some lines? Something like that:

I appreciate any kind of help!
Thanks in advance.

Best regards from Brazil,

Or isn’t it possible?

I’m afraid this issue is not related to three.js. If you embed the canvas directly into HTML and you can manage to achieve a light blue background, it should also work when using it as a texture.

So try to achieve the desired visual result with this fiddle first:

BTW: When using a canvas as a texture, don’t do this:

var texture = new THREE.Texture(cnv);
texture.needsUpdate = true;

There is a dedicated class for this use case:

var texture = new THREE.CanvasTexture(cnv);


I got it in working in the fiddle:

But when I try it with three.js I can’t achieve the same result, do you know what can be causing that @Mugen87 ?.

You are not drawing on the canvas, the color is applied on the DOM element instead.
I recommend to draw a background inside your image, using a 2D context with composite effect

const ctx = canvas.getContext("2d");

//fill the background of the graph
//destination-atop replace any transparent pixels with the given color
ctx.globalCompositeOperation = "destination-atop";
ctx.fillStyle = "#add8e6";
ctx.fillRect( 0, 0, canvasWidth, canvasHeight );
1 Like