1# CanvasGradient
2
3**CanvasGradient** provides a canvas gradient object.
4
5>  **NOTE**
6>
7>  The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
8
9
10
11## addColorStop
12
13addColorStop(offset: number, color: string): void
14
15Adds a color stop for the **CanvasGradient** object based on the specified offset and gradient color.
16
17**Widget capability**: This API can be used in ArkTS widgets since API version 9.
18
19**Atomic service API**: This API can be used in atomic services since API version 11.
20
21**System capability**: SystemCapability.ArkUI.ArkUI.Full
22
23**Parameters**
24
25| Name | Type | Mandatory | Description |
26| ------ | ------ | ---- | ---------------------------------------- |
27| offset | number | Yes | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.            |
28| color  | string | Yes | Gradient color to set. For details about the color notation, see the description of the string type in [ResourceColor](ts-types.md#resourcecolor). |
29
30
31**Example**
32
33  ```ts
34  // xxx.ets
35  @Entry
36  @Component
37  struct AddColorStop {
38    private settings: RenderingContextSettings = new RenderingContextSettings(true)
39    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
40
41    build() {
42      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
43        Canvas(this.context)
44          .width('100%')
45          .height('100%')
46          .backgroundColor('#ffff00')
47          .onReady(() => {
48            let grad = this.context.createLinearGradient(50, 0, 300, 100)
49            grad.addColorStop(0.0, '#ff0000')
50            grad.addColorStop(0.5, '#ffffff')
51            grad.addColorStop(1.0, '#00ff00')
52            this.context.fillStyle = grad
53            this.context.fillRect(0, 0, 400, 400)
54          })
55      }
56      .width('100%')
57      .height('100%')
58    }
59  }
60  ```
61  ![en-us_image_0000001194032516](figures/en-us_image_0000001194032516.jpeg)
62
63
64