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

**URL:** <https://discourse.threejs.org/t/is-there-any-way-of-making-a-canvas-sprite-and-adding-to-the-sprite-some-background-color-at-the-same-moment/26725>\
**Category:** Questions\
**Tags:** canvas\
**Created:** [May 28, 2021, 6:25pm UTC](https://discourse.threejs.org/t/is-there-any-way-of-making-a-canvas-sprite-and-adding-to-the-sprite-some-background-color-at-the-same-moment/26725 "2021-05-28T18:25:05Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![MQdev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mqdev/32/19014_2.png) [@MQdev](https://discourse.threejs.org/u/MQdev)\
**Post date:** [May 28, 2021, 6:25pm UTC](https://discourse.threejs.org/t/is-there-any-way-of-making-a-canvas-sprite-and-adding-to-the-sprite-some-background-color-at-the-same-moment/26725/1 "2021-05-28T18:25:06Z")

</div>

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](http://jsfiddle.net/mqdevWG/crpg54ah/19/).  
[![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/1/71fa756c55bb366728118b73400f600f9203f5f7.png)](http://jsfiddle.net/mqdevWG/crpg54ah/19/)

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/0/10a5f4a5c7853d07e956120ca6fd72b19060de13.png)

I appreciate any kind of help!  
Thanks in advance.

Best regards from Brazil,  
Matheus

---

<div class="post-metadata">

**Author:** ![MQdev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mqdev/32/19014_2.png) [@MQdev](https://discourse.threejs.org/u/MQdev)\
**Post date:** [May 31, 2021, 11:42am UTC](https://discourse.threejs.org/t/is-there-any-way-of-making-a-canvas-sprite-and-adding-to-the-sprite-some-background-color-at-the-same-moment/26725/2 "2021-05-31T11:42:26Z")

</div>

Or isn’t it possible?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 31, 2021, 1:23pm UTC](https://discourse.threejs.org/t/is-there-any-way-of-making-a-canvas-sprite-and-adding-to-the-sprite-some-background-color-at-the-same-moment/26725/3 "2021-05-31T13:23:04Z")

</div>

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

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

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

```

There is a dedicated class for this use case:

```javascript
var texture = new THREE.CanvasTexture(cnv);

```

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 31, 2021, 1:28pm UTC](https://discourse.threejs.org/t/is-there-any-way-of-making-a-canvas-sprite-and-adding-to-the-sprite-some-background-color-at-the-same-moment/26725/4 "2021-05-31T13:28:05Z")

</div>

/cc

> <https://stackoverflow.com/questions/67774409/is-there-any-way-of-making-a-canvas-sprite-and-adding-to-the-sprite-some-backgr>

---

<div class="post-metadata">

**Author:** ![MQdev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mqdev/32/19014_2.png) [@MQdev](https://discourse.threejs.org/u/MQdev)\
**Post date:** [June 8, 2021, 1:01pm UTC](https://discourse.threejs.org/t/is-there-any-way-of-making-a-canvas-sprite-and-adding-to-the-sprite-some-background-color-at-the-same-moment/26725/5 "2021-06-08T13:01:10Z")

</div>

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

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/3/b36612e957df4002050c95b4f303f25be3b17f37.png)

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/8/28799bfa6a27443ce98a3c97e5d55f88a39b91b0.png)

---

<div class="post-metadata">

**Author:** ![Oxyn](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/oxyn/32/12902_2.png) [@Oxyn](https://discourse.threejs.org/u/Oxyn)\
**Post date:** [June 11, 2021, 12:19pm UTC](https://discourse.threejs.org/t/is-there-any-way-of-making-a-canvas-sprite-and-adding-to-the-sprite-some-background-color-at-the-same-moment/26725/6 "2021-06-11T12:19:15Z")

</div>

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

```javascript
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 );

```