The options to apply a base color to canvas to cover what's behind The particles will unveil what is covered by the canvas

Background Mask

Composite

This property is used to choose the composition mode for the background mask effect.

The default value is destination-out, which unveils the background below using drawn elements, any other valid value can be found here

Cover

The cover property can be set to a HEX string or to a {@link IColor | color object}, that is the same as the one used in particles.color options.

The cover can also be a {@link IBackgroundMaskCover | cover object} like the one described below.

Color

The color property can be set to a HEX string or to a {@link IColor | color object}, that is the same as the one used in particles.color options.

This color is used to cover the background set in the background section on in a below element, if this property is not set the cover will be transparent.

Samples

HEX sample
{
"color": "#bada55"
}
HEX IColor sample
{
"color": {
"value": "#bada55"
}
}
Rgb sample
{
"color": {
"value": {
"r": 255,
"g": 127,
"b": 0
}
}
}
Hsl sample
{
"color": {
"h": 180,
"s": 100,
"l": 50
}
}

Opacity

The opacity property sets the color property opacity, so you can set a semi-transparent cover.

This value is by default to 1 and it accepts any value between 0 and 1 included.

Enable

This property set the background mask mode, this mode enables the composite option to all elements drawn.

interface IBackgroundMask {
    composite: GlobalCompositeOperation;
    cover: string | IColor | RecursivePartial<IBackgroundMaskCover>;
    enable: boolean;
}

Implemented by

Properties

composite: GlobalCompositeOperation

This property is used to choose the composition mode for the background mask effect.

The default value is destination-out, which unveils the background below using drawn elements, any other valid value can be found here

The cover property can be set to a HEX string or to a color object, that is the same as the one used in particles.color options.

The cover can also be a object like the one described below.

enable: boolean

This property set the background mask mode, this mode enables the composite option to all elements drawn.