1# CanvasGradient<a name="EN-US_TOPIC_0000001162494623"></a> 2 3- [addColorStop\(\)](#en-us_topic_0000001058460513_section12691015917) 4 5**CanvasGradient** provides a gradient object. 6 7## addColorStop\(\)<a name="en-us_topic_0000001058460513_section12691015917"></a> 8 9Adds a color stop for the** CanvasGradient** object based on the specified offset and gradient color. 10 11- Parameter 12 13 <a name="en-us_topic_0000001058460513_table1032173253712"></a> 14 <table><thead align="left"><tr id="en-us_topic_0000001058460513_row166643263712"><th class="cellrowborder" valign="top" width="21.69%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058460513_p1966932123714"><a name="en-us_topic_0000001058460513_p1966932123714"></a><a name="en-us_topic_0000001058460513_p1966932123714"></a>Parameter</p> 15 </th> 16 <th class="cellrowborder" valign="top" width="34.74%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058460513_p10661232173710"><a name="en-us_topic_0000001058460513_p10661232173710"></a><a name="en-us_topic_0000001058460513_p10661232173710"></a>Type</p> 17 </th> 18 <th class="cellrowborder" valign="top" width="43.57%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058460513_p66673283719"><a name="en-us_topic_0000001058460513_p66673283719"></a><a name="en-us_topic_0000001058460513_p66673283719"></a>Description</p> 19 </th> 20 </tr> 21 </thead> 22 <tbody><tr id="en-us_topic_0000001058460513_row1166193243714"><td class="cellrowborder" valign="top" width="21.69%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058460513_p96673263717"><a name="en-us_topic_0000001058460513_p96673263717"></a><a name="en-us_topic_0000001058460513_p96673263717"></a>offset</p> 23 </td> 24 <td class="cellrowborder" valign="top" width="34.74%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058460513_p1674323372"><a name="en-us_topic_0000001058460513_p1674323372"></a><a name="en-us_topic_0000001058460513_p1674323372"></a>number</p> 25 </td> 26 <td class="cellrowborder" valign="top" width="43.57%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058460513_p12672326374"><a name="en-us_topic_0000001058460513_p12672326374"></a><a name="en-us_topic_0000001058460513_p12672326374"></a>Proportion of the distance between the color stop and the start point to the total length. The value ranges from 0 to 1.</p> 27 </td> 28 </tr> 29 <tr id="en-us_topic_0000001058460513_row146783253715"><td class="cellrowborder" valign="top" width="21.69%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058460513_p46773203715"><a name="en-us_topic_0000001058460513_p46773203715"></a><a name="en-us_topic_0000001058460513_p46773203715"></a>color</p> 30 </td> 31 <td class="cellrowborder" valign="top" width="34.74%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058460513_p1967173213712"><a name="en-us_topic_0000001058460513_p1967173213712"></a><a name="en-us_topic_0000001058460513_p1967173213712"></a>string</p> 32 </td> 33 <td class="cellrowborder" valign="top" width="43.57%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058460513_p1467123233710"><a name="en-us_topic_0000001058460513_p1467123233710"></a><a name="en-us_topic_0000001058460513_p1467123233710"></a>Gradient color to set.</p> 34 </td> 35 </tr> 36 </tbody> 37 </table> 38 39- Returned Value 40 41 N/A 42 43- Example 44 45 ``` 46 const gradient = ctx.createLinearGradient(0,0,100,0); 47 gradient.addColorStop(0,'#00ffff'); 48 gradient.addColorStop(1,'#ffff00'); 49 ``` 50 51 52