Exercise 13.03: The Fill Color Paint Worklet
In this exercise, we will create a new paint worklet that extends the red fill paint worklet to allow any color to be used to fill a rectangle. While still simple and easily achieved with standard CSS, this exercise will let us see how we can use properties with our paint worklets.
The steps are as follows:
- Make a copy of
red-fill-paint.jsfrom Exercise 13.01, Browser Support, and rename it tocolor-fill-paint.jsunderChapter13folder. We will change the name of the class toColorFillPaintWorklet. - The paint worklet for the fill color paint worklet will be very similar to the red fill paint worklet, although we will take the color value from the
--fill-colorproperty, thus allowing us to change the color dynamically. To do this, we need to add a staticinputPropertiesfunction that returns an array with the--fill-colorproperty:class ColorFillPaintWorklet { static get inputProperties() { &...