# CanvasGradient
> **NOTE:**
>This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
**CanvasGradient** provides a gradient object.
## addColorStop
addColorStop\(offset: number, color: string\): void
Adds a color stop for the **CanvasGradient** object based on the specified offset and gradient color.
- Parameters
Name
Type
Mandatory
Default Value
Description
offset
number
Yes
0
Proportion of the distance between the color stop and the start point to the total length. The value ranges from 0 to 1.
color
string
Yes
'ffffff'
Gradient color to set.
- Example
```
@Entry
@Component
struct Page45 {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private gra:CanvasGradient = new CanvasGradient()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
var grad = this.context.createLinearGradient(50,0, 300,100)
gra.addColorStop(0.0, 'red')
gra.addColorStop(0.5, 'white')
gra.addColorStop(1.0, 'green')
this.context.fillStyle = grad
this.context.fillRect(0, 0, 500, 500)
})
}
.width('100%')
.height('100%')
}
}
```
