# Problem with canvas as texture

**URL:** <https://forum.babylonjs.com/t/problem-with-canvas-as-texture/45110>\
**Category:** Questions\
**Created:** [October 23, 2023, 3:53am UTC](https://forum.babylonjs.com/t/problem-with-canvas-as-texture/45110 "2023-10-23T03:53:44Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![491667914](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/491667914/32/31500_2.png) [@491667914](https://forum.babylonjs.com/u/491667914)\
**Post date:** [October 23, 2023, 3:53am UTC](https://forum.babylonjs.com/t/problem-with-canvas-as-texture/45110/1 "2023-10-23T03:53:44Z")

</div>

Now I want to use canvas as the texture of the mesh. Using HtmlElementTexture and PBRMaterial can meet my requirements, but I am not sure if this is the best way. And I found that the fill color of canvas is black. If I want the fill color to be How should I do transparent color?Even though I used CreateFromBase64String, the effect is the same.Because I use an external library, I cannot provide a playground. The following is part of my code.I can provide this base64 if needed

```auto
 const canvas1 = document.querySelector('.heatmap').children[0];
                console.log(canvas1)
                var texture = new BABYLON.HtmlElementTexture("", canvas1, {
                    scene
                });
                // const textureInBase64 = canvas1.toDataURL();
                // console.log(textureInBase64);
                // var texture = new BABYLON.Texture.CreateFromBase64String(
                // textureInBase64,
                // "theTexture",
                // scene
                // )

                var material = new BABYLON.PBRMaterial("", scene);
                material.unlit = true;
                material.alpha = 1;
                material.albedoTexture = texture;
                // material.albedoColor = new BABYLON.Color3(1, 0, 0);
                box.material = material;

```

This is the result of demo:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/4/64e8ff4ff5d92c0de5caa6eb9974f3558a8ccec6.jpeg)

---

<div class="post-metadata">

**Author:** ![nasimiasl](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nasimiasl/32/34_2.png) [@nasimiasl](https://forum.babylonjs.com/u/nasimiasl)\
**Post date:** [October 23, 2023, 5:40am UTC](https://forum.babylonjs.com/t/problem-with-canvas-as-texture/45110/2 "2023-10-23T05:40:39Z")

</div>

@491667914

hey use DynamicTexture

---

<div class="post-metadata">

**Author:** ![491667914](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/491667914/32/31500_2.png) [@491667914](https://forum.babylonjs.com/u/491667914)\
**Post date:** [October 23, 2023, 5:57am UTC](https://forum.babylonjs.com/t/problem-with-canvas-as-texture/45110/3 "2023-10-23T05:57:54Z")

</div>

@nasimiasl I am a beginner when it comes to textures, could you please provide some pseudo code for me to understand 😉

---

<div class="post-metadata">

**Author:** ![nasimiasl](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nasimiasl/32/34_2.png) [@nasimiasl](https://forum.babylonjs.com/u/nasimiasl)\
**Post date:** [October 23, 2023, 6:04am UTC](https://forum.babylonjs.com/t/problem-with-canvas-as-texture/45110/4 "2023-10-23T06:04:56Z")

</div>

yes sure  
you can find all here

> **[Dynamic Textures | Babylon.js Documentation](https://doc.babylonjs.com/features/featuresDeepDive/materials/using/dynamicTexture)**
>
> Learn all about dynamic textures in Babylon.js.

---

<div class="post-metadata">

**Author:** ![491667914](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/491667914/32/31500_2.png) [@491667914](https://forum.babylonjs.com/u/491667914)\
**Post date:** [October 23, 2023, 6:26am UTC](https://forum.babylonjs.com/t/problem-with-canvas-as-texture/45110/5 "2023-10-23T06:26:24Z")

</div>

@nasimiasl Thank you very much for your suggestions, I tried DynamicTexture, but I still don’t know how to make the surrounding area that is not drawn transparent or change its color so that it is not black.This is my current code and results:

```auto
                const myDynamicTexture = new BABYLON.DynamicTexture('', { width: canvas1.width, height: canvas1.height }, scene);
                myDynamicTexture._canvas = canvas1;
                myDynamicTexture.update();
                var material = new BABYLON.StandardMaterial("", scene);
                material.diffuseTexture = myDynamicTexture;
                material.useAlphaFromDiffuseTexture = true;

```

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/b/9be7129c2bb281624870536382416f84e898ab07.jpeg)

---

<div class="post-metadata">

**Author:** ![xiehangyun](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/xiehangyun/32/30777_2.png) [@xiehangyun](https://forum.babylonjs.com/u/xiehangyun)\
**Post date:** [October 23, 2023, 7:30am UTC](https://forum.babylonjs.com/t/problem-with-canvas-as-texture/45110/6 "2023-10-23T07:30:49Z")

</div>

[Dynamic Texture Example | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#5ZCGRM#4637)

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [October 23, 2023, 11:20am UTC](https://forum.babylonjs.com/t/problem-with-canvas-as-texture/45110/7 "2023-10-23T11:20:46Z")

</div>

Closing this as it seems to have been resolved in [Use canvas as texture - Questions - Babylon.js (babylonjs.com)](https://forum.babylonjs.com/t/use-canvas-as-texture/45109/5)

Please keep questions about the same topic in a single post to help organization 🙂

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [October 23, 2023, 11:20am UTC](https://forum.babylonjs.com/t/problem-with-canvas-as-texture/45110/8 "2023-10-23T11:20:49Z")

</div>