Fill a rounded rectangle with a gradient.

I'm writing myself a placard for character vitals (basically what you see in every console RPG) and using a gradient to fade the bar color from, say green to red, would be awesome.

I've managed to do this by drawing a gradient, then overlaying the gradient with a rectangle the same color as the background image to block out part of that gradient from right to left. It looks ok that way, but it's left me with two restrictions:
first, I'd like to switch from a solid color background to a background image, which would kill my idea of blocking out the gradient with background color.
Second, I'd like to use a rounded rectangle rather than a standard rectangle, to give the bars more of a sleek appearance. I tried using a no-fill rounded rectangle, but of course this just leaves the corners of the gradient showing outside of that frame... so I'm kind of stumped.

Thus, is it possible to use a gradient as a fill color? How could I rig this up to work, if not?

I can think of how you can rig it with WindowImage and WindowBlendImage...

Create a Winiwinow with a black background and draw a round rect the size of your bar in it with a white fill. Use WindowImageFromWindow on that window. you now have a stamp/cooke cutter of the final shape.

create another miniwindow of the same size and use WindowGradient to fill it entirely.

Use WindowBlendImage with the AND mode blending to mask the 2nd window into the shape of the first window.

Use WindowImageFromWindow again to make a bitmap of your final bar shape.

Use WindowBlendImage with the Or mode to put that graphic into your Placard window. It makes black the transparent color... there are different hoops to jump thru is you wanted a different mask/transparency color than black.

You can do it with a mask. As a demo, make a main window:

-- main result window
win = GetPluginID ()  
WindowCreate (win, 0, 0, 300, 200, 7, 0, ColourNameToRGB("silver"))  -- create window
WindowShow (win,  true)  -- show it 

Now draw whatever gradient (or background image) you want into a second window:

-- gradient window
win2 = GetPluginID ()  .. ".2"
WindowCreate (win2, 0, 0, 200, 80, 7, 0, ColourNameToRGB("white"))  -- create window
WindowShow (win2,  true)  -- show it  (for testing purposes only)

WindowGradient (win2, 0, 0, 0, 0, 
                ColourNameToRGB ("red"), 
                ColourNameToRGB ("yellow"), 
                1)  -- left to right

Now make a mask in a third window:

-- mask window
win3 = GetPluginID ()  .. ".3"
WindowCreate (win3, 0, 0, 200, 80, 7, 0, ColourNameToRGB("black"))  -- create window
WindowShow (win3,  true)  -- show it (for testing purposes only)

-- round rectangle
WindowCircleOp (win3, 3, 20, 20, 180, 60, 
                ColourNameToRGB("black"), 5, 0,  -- no pen
                ColourNameToRGB("white"), 0,  -- brush
                25, 25)

Convert both temporary windows into images, and merge them into the main window:

-- convert to images
WindowImageFromWindow (win, "gradient", win2)
WindowImageFromWindow (win, "mask", win3)

-- do the merge
WindowMergeImageAlpha (win, "gradient", "mask", 20, 20, 200, 100, 0, 1, 0, 0, 0, 0)

Normally you wouldn't show win2 and win3, I have just done that so you can see what is happening under the hood. By tweaking coordinates, colours etc., you can have pretty-much any effect you want.

One effect you can experiment with is blurring the mask. To do that add this line after creating the round rectangle:

WindowFilter (win3, 0, 0, 0, 0, 3, 0) -- blur both directions

This gives this mask:

Now the resulting image looks like this, which you may or may not like:

Of course you can use a similar effect to merge in a background image into a round rectangle (or indeed, any shape).