I needed a canvas with customizable background colors. I found a few examples and sources on the web but I was not satisfied enough with them, so I decided to build my own one.
GradientCanvas extends mx:Canvas by creating a customizable background gradient of colors. The class adds styles to the mx:Canvas and has a simple structure as it draws a rounded rectangle in the overriden updateDisplayList() function. This allows to take advantage of both beginGradientFill and drawRoundRectComplex options: type of gradient, ratios, rotations, offsets, corner radius settings…)
As a demo, I provide a specific style explorer that generates the CSS styles or MXML declarations for your own use.
You can get a demo of my GradientCanvas here.
The version 2 of this component is available here
I would be pleased to get feedback on this component, comments on the code or any suggestion of improvement .
This is the first version of my GradientCanvas. For the v2, I would like to build a multi-gradient background and play with borders and maybe with backgroundImage, so stay tuned if you like this v1 !