Hello,
What is the good way to create a gradient for a GUI Control or Container ? Is it possible to define a gradient with local coordonates (relative to parent) ?
It seems LinearGradient is asking for absolute position (x0, y0) and (x1, y1) in the canvas, not from parent local coordinates. I am able to play with ratio to get what I want, but If I reduce my window, my gradient change which is logical but not the expected behaviour.
Also, I think even if I manage to get the absolute position of the parent, I think the gradient will be generated only once and will not follow window resize.
I have seen this PG : Babylon.js Playground but I think it is not a good idea to inherit a GUI class and override an internal method like _localDraw while there is an dedicated API. Is this the only way to get a gradient ??
Thx
Hello! Yes, the gradients take absolute coordinates from the canvas, to follow the Canvas API. To adapt to window changes, you can recreate the gradient, like this: Fixed Gradient | Babylon.js Playground (babylonjs.com).
When I implemented the gradient class I was in doubt if I should automatically convert from global to local coordinates, but since doing so would always require creating a new gradient I preferred to not do it automatically because in some cases it might not be required and it would save performance in this case 
I see, thank you. With your solution, unless we resize the window, performance are equals right ?
If yes, I think it would be great to integrate this as a new Babylon feature.
If no, we can let developers do their own tricks.
Also, your sample is simple because you only have one panel. In my case I have around 6 container depth and frequently add positioning adjustment for UX/UI/Theming. In such situation, it is very complicated to compute the right values.
Getting the absolute positioning of a container could save the situation, but I fail to find a way. If I create a Rectangle, with vAlign/hAlign or without, the top/left/right/bot values in pixel are always 0, which does not help.
Do you know a way to get the absolute position of a container in the canvas (ideally computed depending on parents) ?
In fact, I was trying to make a “panel UI template” for a game. This panel will appear at different places and I expect the gradient to be the same.
I have good experience with CSS, I am convinced that implementing a ‘relative’ component logic is almost mandatory 
.