How to make a gradient rectangle in 2D gui?

Can someone give me a PG?

Looking at this forum post here: CSS vs BabylonJS GUI questions: line height, letter spacing, inline text styles, units, calc(), and gradients

I do not believe it is possible :frowning: However, you can simple upload an image of a gradient and use that instead for your gui. :slight_smile:

You can extend GUI Rectangle control, overwrite the draw function, gadients can be made on canvas context:

context.createLinearGradient(x0, y0, x1, y1);

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient#filling_a_rectangle_with_a_linear_gradient

I tried to do so, but the result were not correct.

let gradient = context.createLinearGradient(0, 0, 0, 100);
gradient.addColorStop(0, 'green');
gradient.addColorStop(0.25, 'blue');
gradient.addColorStop(1, 'red');
context.fillStyle = gradient;

Above is my code, the result shows only red.

something like this should work
https://playground.babylonjs.com/#NTZ766

2 Likes

Thank you very much!