# Making a HUD using advancedTexture on GUI image
**URL:** https://forum.babylonjs.com/t/making-a-hud-using-advancedtexture-on-gui-image/26566
**Category:** Questions
**Created:** [January 8, 2022, 11:29am UTC](https://forum.babylonjs.com/t/making-a-hud-using-advancedtexture-on-gui-image/26566 "2022-01-08T11:29:30Z")
**Posts on this page:** 16
**Page:** 1
### Author:  [@trueshot](https://forum.babylonjs.com/u/trueshot)
#### Post date: [January 8, 2022, 11:29am UTC](https://forum.babylonjs.com/t/making-a-hud-using-advancedtexture-on-gui-image/26566/1 "2022-01-08T11:29:30Z")
I am trying to make a HUD that displays constantly changing data (distance to enemy, etc.).
I was thinking that using a GUI.Image. In order to do that, I would need to have access to the canvas element where I could update the canvas by hand and then call an .update() like you do with a dynamicTexture texture.
```auto
var wallTexture = new BABYLON.DynamicTexture('', someCanvas, scene)
...
// do things to somCanvas
...
wallTexture.update()
```
Is this a good idea and is it possible?
```auto
var image = new BABYLON.GUI.Image("but", "textures/grass.png");
```
how would I reference the “wallTexture” since it is not attached to a material?
Thanks
---
### Author:  [@trueshot](https://forum.babylonjs.com/u/trueshot)
#### Post date: [January 8, 2022, 11:32am UTC](https://forum.babylonjs.com/t/making-a-hud-using-advancedtexture-on-gui-image/26566/2 "2022-01-08T11:32:24Z")
This forum post seems to indicate that it is possible, but the syntax is not included.
> [@DynamicTexture to GUI.Image without toUrl?](https://forum.babylonjs.com/t/dynamictexture-to-gui-image-without-tourl/20333):
>
> Is there anyway to avoid converting a dynamic texture toDataUrl to get the content to a GUI.Image? Right now I have a pretty complicated UI element that is being generated every two frames that the only real way to achive the looks is by using a DynamicTexture. After the DT updates I then dump the results to a new GUI.Image replace the old Image and dispose it. Its highly intensive and I would much rather just be able to do the DT.update() and have the results propagate to the UI instantly. …
---
### Author:  [@trueshot](https://forum.babylonjs.com/u/trueshot)
#### Post date: [January 9, 2022, 5:26pm UTC](https://forum.babylonjs.com/t/making-a-hud-using-advancedtexture-on-gui-image/26566/3 "2022-01-09T17:26:14Z")
Deltakosh said: well, DynamicTexture internally uses a canvas, so you can set this canvas as the source of your image (or at least directly copy it onto the GUI element)
So I am trying to figure out how to set a GUI.Image source as a DynamicTexture (canvas) but I am getting an error.
> **[Babylon.js Playground](https://playground.babylonjs.com/#5ZCGRM%232193)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes
---
### Author:  [@trueshot](https://forum.babylonjs.com/u/trueshot)
#### Post date: [January 10, 2022, 10:25am UTC](https://forum.babylonjs.com/t/making-a-hud-using-advancedtexture-on-gui-image/26566/4 "2022-01-10T10:25:50Z")
So I have made some progress. Feels like a hack.
> **[Babylon.js Playground](https://playground.babylonjs.com/#5ZCGRM%232196)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes
---
### Author:  [@carolhmj](https://forum.babylonjs.com/u/carolhmj)
#### Post date: [January 10, 2022, 3:36pm UTC](https://forum.babylonjs.com/t/making-a-hud-using-advancedtexture-on-gui-image/26566/5 "2022-01-10T15:36:05Z")
@Pryme8 was the original poster on that topic, so maybe we can ask them how they did it? 😃
---
### Author:  [@trueshot](https://forum.babylonjs.com/u/trueshot)
#### Post date: [January 10, 2022, 3:37pm UTC](https://forum.babylonjs.com/t/making-a-hud-using-advancedtexture-on-gui-image/26566/6 "2022-01-10T15:37:38Z")
Great idea. Thanks.
---
### Author:  [@Pryme8](https://forum.babylonjs.com/u/Pryme8)
#### Post date: [January 10, 2022, 4:27pm UTC](https://forum.babylonjs.com/t/making-a-hud-using-advancedtexture-on-gui-image/26566/7 "2022-01-10T16:27:24Z")
First thing is to review how a GUI element draws itself.
>
Then we jack this and replace what we need!
> **[Babylon.js Playground](https://playground.babylonjs.com/#LAZ7WQ)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes
The one thing you need to do though is set a property on the main container that changes otherwise the image wont draw because the GUI wont see any elements as dirty. In my example that would be the rotation, but you can literally toggle an element like isReady = false, then isReady = true and it will mark it dirty.
@anyone paying attention, can we get a setDirty method?
---
### Author:  [@trueshot](https://forum.babylonjs.com/u/trueshot)
#### Post date: [January 10, 2022, 5:26pm UTC](https://forum.babylonjs.com/t/making-a-hud-using-advancedtexture-on-gui-image/26566/8 "2022-01-10T17:26:54Z")
Ok. I can make that work. Thank you so much.
> **[Babylon.js Playground](https://playground.babylonjs.com/#LAZ7WQ%232)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes
---
### Author:  [@carolhmj](https://forum.babylonjs.com/u/carolhmj)
#### Post date: [January 10, 2022, 8:48pm UTC](https://forum.babylonjs.com/t/making-a-hud-using-advancedtexture-on-gui-image/26566/9 "2022-01-10T20:48:28Z")
> [@Pryme8](#):
>
> @anyone paying attention, can we get a setDirty method?
We already have a public `_markAsDirty` method (marked hidden on the docs), @Deltakosh @sebavan any objections on making it visible on docs?
---
### Author:  [@trueshot](https://forum.babylonjs.com/u/trueshot)
#### Post date: [January 10, 2022, 9:17pm UTC](https://forum.babylonjs.com/t/making-a-hud-using-advancedtexture-on-gui-image/26566/10 "2022-01-10T21:17:25Z")
Hey, \_markAsDirty() works!
Thanks Carol.
> **[Babylon.js Playground](https://playground.babylonjs.com/#LAZ7WQ%233)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes
---
### Author:  [@Pryme8](https://forum.babylonjs.com/u/Pryme8)
#### Post date: [January 11, 2022, 3:24am UTC](https://forum.babylonjs.com/t/making-a-hud-using-advancedtexture-on-gui-image/26566/11 "2022-01-11T03:24:40Z")
Love how you where paying attention. ❤
---
### Author:  [@sebavan](https://forum.babylonjs.com/u/sebavan)
#### Post date: [January 11, 2022, 12:57pm UTC](https://forum.babylonjs.com/t/making-a-hud-using-advancedtexture-on-gui-image/26566/12 "2022-01-11T12:57:42Z")
---
### Author:  [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)
#### Post date: [January 11, 2022, 5:18pm UTC](https://forum.babylonjs.com/t/making-a-hud-using-advancedtexture-on-gui-image/26566/13 "2022-01-11T17:18:34Z")
We should expose a markAsDirty public function 🙂
---
### Author:  [@carolhmj](https://forum.babylonjs.com/u/carolhmj)
#### Post date: [January 12, 2022, 12:11pm UTC](https://forum.babylonjs.com/t/making-a-hud-using-advancedtexture-on-gui-image/26566/14 "2022-01-12T12:11:49Z")
[Create markAsDirty and markAllAsDirty functions on Control by carolhmj · Pull Request #11765 · BabylonJS/Babylon.js (github.com)](https://github.com/BabylonJS/Babylon.js/pull/11765) PR up!
---
### Author:  [@carolhmj](https://forum.babylonjs.com/u/carolhmj)
#### Post date: [January 14, 2022, 12:00pm UTC](https://forum.babylonjs.com/t/making-a-hud-using-advancedtexture-on-gui-image/26566/15 "2022-01-14T12:00:49Z")
Aaaand merged now!
---
### Author:  [@carolhmj](https://forum.babylonjs.com/u/carolhmj)
#### Post date: [January 18, 2022, 1:55pm UTC](https://forum.babylonjs.com/t/making-a-hud-using-advancedtexture-on-gui-image/26566/16 "2022-01-18T13:55:38Z")