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

Questions
1

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.
image

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:
image

I appreciate any kind of help!
Thanks in advance.

Best regards from Brazil,
Matheus

2

Or isn’t it possible?

3

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: http://jsfiddle.net/j9Lpn54f/1/

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);
4

/cc

5

I got it in working in the fiddle: http://jsfiddle.net/mqdevWG/zem7uvyt/5/

image
image838×419 14.3 KB

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

image
image1319×309 31.5 KB

6

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