1# CanvasRenderingContext2D<a name="EN-US_TOPIC_0000001162414637"></a> 2 3- [fillRect\(\)](#en-us_topic_0000001058830807_section16678142165920) 4- [fillStyle](#en-us_topic_0000001058830807_section159395553313) 5- [clearRect\(\)](#en-us_topic_0000001058830807_section205940367194) 6- [strokeRect\(\)](#en-us_topic_0000001058830807_section18427819195711) 7- [fillText\(\)](#en-us_topic_0000001058830807_section114524106587) 8- [strokeText\(\)](#en-us_topic_0000001058830807_section4144191355810) 9- [measureText\(\)](#en-us_topic_0000001058830807_section378313153588) 10- [lineWidth](#en-us_topic_0000001058830807_section652391716583) 11- [strokeStyle](#en-us_topic_0000001058830807_section1191517562337) 12- [stroke\(\)](#en-us_topic_0000001058830807_section1071523411019) 13- [beginPath\(\)](#en-us_topic_0000001058830807_section12670134392) 14- [moveTo\(\)](#en-us_topic_0000001058830807_section16813157310) 15- [lineTo\(\)](#en-us_topic_0000001058830807_section4767915838) 16- [closePath\(\)](#en-us_topic_0000001058830807_section86825473917) 17- [lineCap](#en-us_topic_0000001058830807_section6852133718410) 18- [lineJoin](#en-us_topic_0000001058830807_section395812401442) 19- [miterLimit](#en-us_topic_0000001058830807_section429711421945) 20- [font](#en-us_topic_0000001058830807_section17597332121110) 21- [textAlign](#en-us_topic_0000001058830807_section15681153321114) 22- [textBaseline](#en-us_topic_0000001058830807_section77981136141111) 23- [createPattern\(\)](#en-us_topic_0000001058830807_section1034582183919) 24- [bezierCurveTo\(\)](#en-us_topic_0000001058830807_section450521614318) 25- [quadraticCurveTo\(\)](#en-us_topic_0000001058830807_section12938183173) 26- [arc\(\)](#en-us_topic_0000001058830807_section102329511716) 27- [arcTo\(\)](#en-us_topic_0000001058830807_section3172156571) 28- [rect\(\)](#en-us_topic_0000001058830807_section1351519304107) 29- [fill\(\)](#en-us_topic_0000001058830807_section14842031151015) 30- [clip\(\)](#en-us_topic_0000001058830807_section1355171921416) 31- [rotate\(\)](#en-us_topic_0000001058830807_section7682182091419) 32- [scale\(\)](#en-us_topic_0000001058830807_section157714218144) 33- [transform\(\)](#en-us_topic_0000001058830807_section1675964717570) 34- [setTransform\(\)](#en-us_topic_0000001058830807_section1439382216440) 35- [translate\(\)](#en-us_topic_0000001058830807_section931011253449) 36- [globalAlpha](#en-us_topic_0000001058830807_section188252174810) 37- [drawImage\(\)](#en-us_topic_0000001058830807_section1953117410488) 38- [restore\(\)](#en-us_topic_0000001058830807_section64027684817) 39- [save\(\)](#en-us_topic_0000001058830807_section410672635214) 40- [createLinearGradient\(\)6+](#en-us_topic_0000001058830807_section1696310905) 41- [createImageData\(\)](#en-us_topic_0000001058830807_section2021142714524) 42- [getImageData\(\)](#en-us_topic_0000001058830807_section92731528205217) 43- [putImageData\(\)](#en-us_topic_0000001058830807_section15774154925515) 44- [setLineDash\(\)](#en-us_topic_0000001058830807_section1934985155516) 45- [getLineDash\(\)](#en-us_topic_0000001058830807_section522105285519) 46- [lineDashOffset](#en-us_topic_0000001058830807_section8283548889) 47- [globalCompositeOperation](#en-us_topic_0000001058830807_section123871750284) 48- [shadowBlur](#en-us_topic_0000001058830807_section6207051888) 49- [shadowColor](#en-us_topic_0000001058830807_section42724396120) 50- [shadowOffsetX](#en-us_topic_0000001058830807_section1616174021219) 51- [shadowOffsetY](#en-us_topic_0000001058830807_section272013417128) 52 53**CanvasRenderingContext2D** allows you to draw rectangles, text, images, and other objects on a canvas. 54 55- Example 56 57 ``` 58 <!-- xxx.hml --> 59 <canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> 60 <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" /> 61 ``` 62 63 ``` 64 // xxx.js 65 export default { 66 handleClick() { 67 const el = this.$refs.canvas1; 68 const ctx = el.getContext('2d'); 69 ctx.beginPath(); 70 ctx.arc(100, 75, 50, 0, 6.28); 71 ctx.stroke(); 72 }, 73 } 74 ``` 75 76 77-  78 79 80## fillRect\(\)<a name="en-us_topic_0000001058830807_section16678142165920"></a> 81 82Fills a rectangle on the canvas. 83 84- Parameter 85 86 <a name="en-us_topic_0000001058830807_table116784429596"></a> 87 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row167864213591"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p8678134225914"><a name="en-us_topic_0000001058830807_p8678134225914"></a><a name="en-us_topic_0000001058830807_p8678134225914"></a>Name</p> 88 </th> 89 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p567911425597"><a name="en-us_topic_0000001058830807_p567911425597"></a><a name="en-us_topic_0000001058830807_p567911425597"></a>Type</p> 90 </th> 91 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p116798423594"><a name="en-us_topic_0000001058830807_p116798423594"></a><a name="en-us_topic_0000001058830807_p116798423594"></a>Description</p> 92 </th> 93 </tr> 94 </thead> 95 <tbody><tr id="en-us_topic_0000001058830807_row46791042125917"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p1467911422593"><a name="en-us_topic_0000001058830807_p1467911422593"></a><a name="en-us_topic_0000001058830807_p1467911422593"></a>x</p> 96 </td> 97 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p1967994235916"><a name="en-us_topic_0000001058830807_p1967994235916"></a><a name="en-us_topic_0000001058830807_p1967994235916"></a>number</p> 98 </td> 99 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p1367984295913"><a name="en-us_topic_0000001058830807_p1367984295913"></a><a name="en-us_topic_0000001058830807_p1367984295913"></a>X-coordinate of the upper left corner of the rectangle</p> 100 </td> 101 </tr> 102 <tr id="en-us_topic_0000001058830807_row1667911426594"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p7679154225917"><a name="en-us_topic_0000001058830807_p7679154225917"></a><a name="en-us_topic_0000001058830807_p7679154225917"></a>y</p> 103 </td> 104 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p867984219592"><a name="en-us_topic_0000001058830807_p867984219592"></a><a name="en-us_topic_0000001058830807_p867984219592"></a>number</p> 105 </td> 106 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p567964295917"><a name="en-us_topic_0000001058830807_p567964295917"></a><a name="en-us_topic_0000001058830807_p567964295917"></a>Y-coordinate of the upper left corner of the rectangle</p> 107 </td> 108 </tr> 109 <tr id="en-us_topic_0000001058830807_row13679114214590"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p126791642105910"><a name="en-us_topic_0000001058830807_p126791642105910"></a><a name="en-us_topic_0000001058830807_p126791642105910"></a>width</p> 110 </td> 111 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p26792422594"><a name="en-us_topic_0000001058830807_p26792422594"></a><a name="en-us_topic_0000001058830807_p26792422594"></a>number</p> 112 </td> 113 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p899913810401"><a name="en-us_topic_0000001058830807_p899913810401"></a><a name="en-us_topic_0000001058830807_p899913810401"></a>Width of the rectangle</p> 114 </td> 115 </tr> 116 <tr id="en-us_topic_0000001058830807_row156796426598"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p1567944235917"><a name="en-us_topic_0000001058830807_p1567944235917"></a><a name="en-us_topic_0000001058830807_p1567944235917"></a>height</p> 117 </td> 118 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p10679642185915"><a name="en-us_topic_0000001058830807_p10679642185915"></a><a name="en-us_topic_0000001058830807_p10679642185915"></a>number</p> 119 </td> 120 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p1668013426599"><a name="en-us_topic_0000001058830807_p1668013426599"></a><a name="en-us_topic_0000001058830807_p1668013426599"></a>Height of the rectangle</p> 121 </td> 122 </tr> 123 </tbody> 124 </table> 125 126- Return Value 127 128 N/A 129 130- Example 131 132  133 134 ``` 135 ctx.fillRect(20, 20, 200, 150); 136 ``` 137 138 139## fillStyle<a name="en-us_topic_0000001058830807_section159395553313"></a> 140 141Sets the style to fill an area. 142 143- Parameter 144 145 <a name="en-us_topic_0000001058830807_table11871845480"></a> 146 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row8211446487"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p172111344482"><a name="en-us_topic_0000001058830807_p172111344482"></a><a name="en-us_topic_0000001058830807_p172111344482"></a>Name</p> 147 </th> 148 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p921110413486"><a name="en-us_topic_0000001058830807_p921110413486"></a><a name="en-us_topic_0000001058830807_p921110413486"></a>Type</p> 149 </th> 150 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p1221111444810"><a name="en-us_topic_0000001058830807_p1221111444810"></a><a name="en-us_topic_0000001058830807_p1221111444810"></a>Description</p> 151 </th> 152 </tr> 153 </thead> 154 <tbody><tr id="en-us_topic_0000001058830807_row92116414485"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p3211242481"><a name="en-us_topic_0000001058830807_p3211242481"></a><a name="en-us_topic_0000001058830807_p3211242481"></a>color</p> 155 </td> 156 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p3211164124812"><a name="en-us_topic_0000001058830807_p3211164124812"></a><a name="en-us_topic_0000001058830807_p3211164124812"></a><color></p> 157 </td> 158 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p42117420487"><a name="en-us_topic_0000001058830807_p42117420487"></a><a name="en-us_topic_0000001058830807_p42117420487"></a>Color used to fill the area</p> 159 </td> 160 </tr> 161 <tr id="en-us_topic_0000001058830807_row19211345485"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p42124414813"><a name="en-us_topic_0000001058830807_p42124414813"></a><a name="en-us_topic_0000001058830807_p42124414813"></a>gradient</p> 162 </td> 163 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p52124494812"><a name="en-us_topic_0000001058830807_p52124494812"></a><a name="en-us_topic_0000001058830807_p52124494812"></a>CanvasGradient</p> 164 </td> 165 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p1721217418484"><a name="en-us_topic_0000001058830807_p1721217418484"></a><a name="en-us_topic_0000001058830807_p1721217418484"></a><strong id="en-us_topic_0000001058830807_b889313423010"><a name="en-us_topic_0000001058830807_b889313423010"></a><a name="en-us_topic_0000001058830807_b889313423010"></a>CanvasGradient</strong> object created via <strong id="en-us_topic_0000001058830807_b164385341345"><a name="en-us_topic_0000001058830807_b164385341345"></a><a name="en-us_topic_0000001058830807_b164385341345"></a>createLinearGradient()</strong></p> 166 </td> 167 </tr> 168 <tr id="en-us_topic_0000001058830807_row621218424815"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p02127464814"><a name="en-us_topic_0000001058830807_p02127464814"></a><a name="en-us_topic_0000001058830807_p02127464814"></a>pattern</p> 169 </td> 170 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p1921284174819"><a name="en-us_topic_0000001058830807_p1921284174819"></a><a name="en-us_topic_0000001058830807_p1921284174819"></a>CanvasPattern</p> 171 </td> 172 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p1821210414486"><a name="en-us_topic_0000001058830807_p1821210414486"></a><a name="en-us_topic_0000001058830807_p1821210414486"></a><strong id="en-us_topic_0000001058830807_b08763720309"><a name="en-us_topic_0000001058830807_b08763720309"></a><a name="en-us_topic_0000001058830807_b08763720309"></a>CanvasPattern</strong> object created via <strong id="en-us_topic_0000001058830807_b946111864510"><a name="en-us_topic_0000001058830807_b946111864510"></a><a name="en-us_topic_0000001058830807_b946111864510"></a>createPattern()</strong></p> 173 </td> 174 </tr> 175 </tbody> 176 </table> 177 178- Return Value 179 180 N/A 181 182- Example 183 184  185 186 ``` 187 ctx.fillStyle = '#0000ff'; 188 ctx.fillRect(20, 20, 150, 100); 189 ``` 190 191 192## clearRect\(\)<a name="en-us_topic_0000001058830807_section205940367194"></a> 193 194Clears the content in a rectangle on the canvas. 195 196- Parameter 197 198 <a name="en-us_topic_0000001058830807_table17906135163511"></a> 199 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row1293515173513"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p9935195111353"><a name="en-us_topic_0000001058830807_p9935195111353"></a><a name="en-us_topic_0000001058830807_p9935195111353"></a>Name</p> 200 </th> 201 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p993516515354"><a name="en-us_topic_0000001058830807_p993516515354"></a><a name="en-us_topic_0000001058830807_p993516515354"></a>Type</p> 202 </th> 203 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p1893510517352"><a name="en-us_topic_0000001058830807_p1893510517352"></a><a name="en-us_topic_0000001058830807_p1893510517352"></a>Description</p> 204 </th> 205 </tr> 206 </thead> 207 <tbody><tr id="en-us_topic_0000001058830807_row109351051153516"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p29357518355"><a name="en-us_topic_0000001058830807_p29357518355"></a><a name="en-us_topic_0000001058830807_p29357518355"></a>x</p> 208 </td> 209 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p1093510513353"><a name="en-us_topic_0000001058830807_p1093510513353"></a><a name="en-us_topic_0000001058830807_p1093510513353"></a>number</p> 210 </td> 211 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p1893545115356"><a name="en-us_topic_0000001058830807_p1893545115356"></a><a name="en-us_topic_0000001058830807_p1893545115356"></a>X-coordinate of the upper left corner of the rectangle</p> 212 </td> 213 </tr> 214 <tr id="en-us_topic_0000001058830807_row49351651123519"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p14935145119354"><a name="en-us_topic_0000001058830807_p14935145119354"></a><a name="en-us_topic_0000001058830807_p14935145119354"></a>y</p> 215 </td> 216 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p1993595111355"><a name="en-us_topic_0000001058830807_p1993595111355"></a><a name="en-us_topic_0000001058830807_p1993595111355"></a>number</p> 217 </td> 218 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p14935135103519"><a name="en-us_topic_0000001058830807_p14935135103519"></a><a name="en-us_topic_0000001058830807_p14935135103519"></a>Y-coordinate of the upper left corner of the rectangle</p> 219 </td> 220 </tr> 221 <tr id="en-us_topic_0000001058830807_row11935551173517"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p129351251173520"><a name="en-us_topic_0000001058830807_p129351251173520"></a><a name="en-us_topic_0000001058830807_p129351251173520"></a>width</p> 222 </td> 223 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p159351516351"><a name="en-us_topic_0000001058830807_p159351516351"></a><a name="en-us_topic_0000001058830807_p159351516351"></a>number</p> 224 </td> 225 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p7935195113515"><a name="en-us_topic_0000001058830807_p7935195113515"></a><a name="en-us_topic_0000001058830807_p7935195113515"></a>Width of the rectangle</p> 226 </td> 227 </tr> 228 <tr id="en-us_topic_0000001058830807_row13935145118355"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p69361451113519"><a name="en-us_topic_0000001058830807_p69361451113519"></a><a name="en-us_topic_0000001058830807_p69361451113519"></a>height</p> 229 </td> 230 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p893611511357"><a name="en-us_topic_0000001058830807_p893611511357"></a><a name="en-us_topic_0000001058830807_p893611511357"></a>number</p> 231 </td> 232 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p11936155183515"><a name="en-us_topic_0000001058830807_p11936155183515"></a><a name="en-us_topic_0000001058830807_p11936155183515"></a>Height of the rectangle</p> 233 </td> 234 </tr> 235 </tbody> 236 </table> 237 238- Return Value 239 240 N/A 241 242- Example 243 244  245 246 ``` 247 ctx.fillStyle = 'rgb(0,0,255)'; 248 ctx.fillRect(0, 0, 400, 200); 249 ctx.clearRect(20, 20, 150, 100); 250 ``` 251 252 253## strokeRect\(\)<a name="en-us_topic_0000001058830807_section18427819195711"></a> 254 255Draws a rectangle stroke on the canvas. 256 257- Parameter 258 259 <a name="en-us_topic_0000001058830807_table18471143916378"></a> 260 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row1849515396371"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p5495133918379"><a name="en-us_topic_0000001058830807_p5495133918379"></a><a name="en-us_topic_0000001058830807_p5495133918379"></a>Name</p> 261 </th> 262 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p10495103913717"><a name="en-us_topic_0000001058830807_p10495103913717"></a><a name="en-us_topic_0000001058830807_p10495103913717"></a>Type</p> 263 </th> 264 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p1949515397379"><a name="en-us_topic_0000001058830807_p1949515397379"></a><a name="en-us_topic_0000001058830807_p1949515397379"></a>Description</p> 265 </th> 266 </tr> 267 </thead> 268 <tbody><tr id="en-us_topic_0000001058830807_row1449512396370"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p15495143917372"><a name="en-us_topic_0000001058830807_p15495143917372"></a><a name="en-us_topic_0000001058830807_p15495143917372"></a>x</p> 269 </td> 270 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p1949514399373"><a name="en-us_topic_0000001058830807_p1949514399373"></a><a name="en-us_topic_0000001058830807_p1949514399373"></a>number</p> 271 </td> 272 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p1149513912372"><a name="en-us_topic_0000001058830807_p1149513912372"></a><a name="en-us_topic_0000001058830807_p1149513912372"></a>X-coordinate of the upper left corner of the rectangle stroke</p> 273 </td> 274 </tr> 275 <tr id="en-us_topic_0000001058830807_row1049543973713"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p3495193913379"><a name="en-us_topic_0000001058830807_p3495193913379"></a><a name="en-us_topic_0000001058830807_p3495193913379"></a>y</p> 276 </td> 277 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p1349513391377"><a name="en-us_topic_0000001058830807_p1349513391377"></a><a name="en-us_topic_0000001058830807_p1349513391377"></a>number</p> 278 </td> 279 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p84961139193711"><a name="en-us_topic_0000001058830807_p84961139193711"></a><a name="en-us_topic_0000001058830807_p84961139193711"></a>Y-coordinate of the upper left corner of the rectangle stroke</p> 280 </td> 281 </tr> 282 <tr id="en-us_topic_0000001058830807_row12496139143718"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p1049633918378"><a name="en-us_topic_0000001058830807_p1049633918378"></a><a name="en-us_topic_0000001058830807_p1049633918378"></a>width</p> 283 </td> 284 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p184961039113711"><a name="en-us_topic_0000001058830807_p184961039113711"></a><a name="en-us_topic_0000001058830807_p184961039113711"></a>number</p> 285 </td> 286 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p18496183918373"><a name="en-us_topic_0000001058830807_p18496183918373"></a><a name="en-us_topic_0000001058830807_p18496183918373"></a>Width of the rectangle stroke</p> 287 </td> 288 </tr> 289 <tr id="en-us_topic_0000001058830807_row1842894223717"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p03284623713"><a name="en-us_topic_0000001058830807_p03284623713"></a><a name="en-us_topic_0000001058830807_p03284623713"></a>height</p> 290 </td> 291 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p83204615372"><a name="en-us_topic_0000001058830807_p83204615372"></a><a name="en-us_topic_0000001058830807_p83204615372"></a>number</p> 292 </td> 293 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p333154663711"><a name="en-us_topic_0000001058830807_p333154663711"></a><a name="en-us_topic_0000001058830807_p333154663711"></a>Height of the rectangle stroke</p> 294 </td> 295 </tr> 296 </tbody> 297 </table> 298 299- Return Value 300 301 N/A 302 303- Example 304 305  306 307 ``` 308 ctx.strokeRect(30, 30, 200, 150); 309 ``` 310 311 312## fillText\(\)<a name="en-us_topic_0000001058830807_section114524106587"></a> 313 314Draws filled text on the canvas. 315 316- Parameter 317 318 <a name="en-us_topic_0000001058830807_table19120835143816"></a> 319 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row9150835103813"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p915043533812"><a name="en-us_topic_0000001058830807_p915043533812"></a><a name="en-us_topic_0000001058830807_p915043533812"></a>Name</p> 320 </th> 321 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p19150193515381"><a name="en-us_topic_0000001058830807_p19150193515381"></a><a name="en-us_topic_0000001058830807_p19150193515381"></a>Type</p> 322 </th> 323 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p31501935153812"><a name="en-us_topic_0000001058830807_p31501935153812"></a><a name="en-us_topic_0000001058830807_p31501935153812"></a>Description</p> 324 </th> 325 </tr> 326 </thead> 327 <tbody><tr id="en-us_topic_0000001058830807_row191502350385"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p1115017358383"><a name="en-us_topic_0000001058830807_p1115017358383"></a><a name="en-us_topic_0000001058830807_p1115017358383"></a>text</p> 328 </td> 329 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p815043517389"><a name="en-us_topic_0000001058830807_p815043517389"></a><a name="en-us_topic_0000001058830807_p815043517389"></a>string</p> 330 </td> 331 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p1150193510385"><a name="en-us_topic_0000001058830807_p1150193510385"></a><a name="en-us_topic_0000001058830807_p1150193510385"></a>Text to draw</p> 332 </td> 333 </tr> 334 <tr id="en-us_topic_0000001058830807_row81501835173814"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p1215093523810"><a name="en-us_topic_0000001058830807_p1215093523810"></a><a name="en-us_topic_0000001058830807_p1215093523810"></a>x</p> 335 </td> 336 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p7150173583813"><a name="en-us_topic_0000001058830807_p7150173583813"></a><a name="en-us_topic_0000001058830807_p7150173583813"></a>number</p> 337 </td> 338 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p515011352383"><a name="en-us_topic_0000001058830807_p515011352383"></a><a name="en-us_topic_0000001058830807_p515011352383"></a>X-coordinate of the lower left corner of the text</p> 339 </td> 340 </tr> 341 <tr id="en-us_topic_0000001058830807_row11150135183813"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p61506358386"><a name="en-us_topic_0000001058830807_p61506358386"></a><a name="en-us_topic_0000001058830807_p61506358386"></a>y</p> 342 </td> 343 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p1515018356386"><a name="en-us_topic_0000001058830807_p1515018356386"></a><a name="en-us_topic_0000001058830807_p1515018356386"></a>number</p> 344 </td> 345 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p51503354387"><a name="en-us_topic_0000001058830807_p51503354387"></a><a name="en-us_topic_0000001058830807_p51503354387"></a>Y-coordinate of the lower left corner of the text</p> 346 </td> 347 </tr> 348 </tbody> 349 </table> 350 351- Return Value 352 353 N/A 354 355- Example 356 357  358 359 ``` 360 ctx.font = '35px sans-serif'; 361 ctx.fillText("Hello World!", 20, 60); 362 ``` 363 364 365## strokeText\(\)<a name="en-us_topic_0000001058830807_section4144191355810"></a> 366 367Draws a text stroke on the canvas. 368 369- Parameter 370 371 <a name="en-us_topic_0000001058830807_table26917485393"></a> 372 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row7719748133917"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p19719548153913"><a name="en-us_topic_0000001058830807_p19719548153913"></a><a name="en-us_topic_0000001058830807_p19719548153913"></a>Name</p> 373 </th> 374 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p8719114812395"><a name="en-us_topic_0000001058830807_p8719114812395"></a><a name="en-us_topic_0000001058830807_p8719114812395"></a>Type</p> 375 </th> 376 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p9719648163917"><a name="en-us_topic_0000001058830807_p9719648163917"></a><a name="en-us_topic_0000001058830807_p9719648163917"></a>Description</p> 377 </th> 378 </tr> 379 </thead> 380 <tbody><tr id="en-us_topic_0000001058830807_row1571915482398"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p9719204813392"><a name="en-us_topic_0000001058830807_p9719204813392"></a><a name="en-us_topic_0000001058830807_p9719204813392"></a>text</p> 381 </td> 382 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p371924883918"><a name="en-us_topic_0000001058830807_p371924883918"></a><a name="en-us_topic_0000001058830807_p371924883918"></a>string</p> 383 </td> 384 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p1345116461512"><a name="en-us_topic_0000001058830807_p1345116461512"></a><a name="en-us_topic_0000001058830807_p1345116461512"></a>Text stroke to draw</p> 385 </td> 386 </tr> 387 <tr id="en-us_topic_0000001058830807_row187191548183919"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p13719204810398"><a name="en-us_topic_0000001058830807_p13719204810398"></a><a name="en-us_topic_0000001058830807_p13719204810398"></a>x</p> 388 </td> 389 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p1371912484399"><a name="en-us_topic_0000001058830807_p1371912484399"></a><a name="en-us_topic_0000001058830807_p1371912484399"></a>number</p> 390 </td> 391 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p245110469119"><a name="en-us_topic_0000001058830807_p245110469119"></a><a name="en-us_topic_0000001058830807_p245110469119"></a>X-coordinate of the lower left corner of the text stroke</p> 392 </td> 393 </tr> 394 <tr id="en-us_topic_0000001058830807_row5719114803911"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p671984814397"><a name="en-us_topic_0000001058830807_p671984814397"></a><a name="en-us_topic_0000001058830807_p671984814397"></a>y</p> 395 </td> 396 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p37192048113917"><a name="en-us_topic_0000001058830807_p37192048113917"></a><a name="en-us_topic_0000001058830807_p37192048113917"></a>number</p> 397 </td> 398 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p245114610113"><a name="en-us_topic_0000001058830807_p245114610113"></a><a name="en-us_topic_0000001058830807_p245114610113"></a>Y-coordinate of the lower left corner of the text stroke</p> 399 </td> 400 </tr> 401 </tbody> 402 </table> 403 404- Return Value 405 406 N/A 407 408- Example 409 410  411 412 ``` 413 ctx.font = '25px sans-serif'; 414 ctx.strokeText("Hello World!", 20, 60); 415 ``` 416 417 418## measureText\(\)<a name="en-us_topic_0000001058830807_section378313153588"></a> 419 420Returns a **TextMetrics** object used to obtain the width of specified text. 421 422- Parameter 423 424 <a name="en-us_topic_0000001058830807_table9108632184010"></a> 425 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row1412483234017"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p14124183212408"><a name="en-us_topic_0000001058830807_p14124183212408"></a><a name="en-us_topic_0000001058830807_p14124183212408"></a>Name</p> 426 </th> 427 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p141241328404"><a name="en-us_topic_0000001058830807_p141241328404"></a><a name="en-us_topic_0000001058830807_p141241328404"></a>Type</p> 428 </th> 429 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p15124632194011"><a name="en-us_topic_0000001058830807_p15124632194011"></a><a name="en-us_topic_0000001058830807_p15124632194011"></a>Description</p> 430 </th> 431 </tr> 432 </thead> 433 <tbody><tr id="en-us_topic_0000001058830807_row2124153244019"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p51241332134014"><a name="en-us_topic_0000001058830807_p51241332134014"></a><a name="en-us_topic_0000001058830807_p51241332134014"></a>text</p> 434 </td> 435 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p4124232134013"><a name="en-us_topic_0000001058830807_p4124232134013"></a><a name="en-us_topic_0000001058830807_p4124232134013"></a>string</p> 436 </td> 437 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p412413244010"><a name="en-us_topic_0000001058830807_p412413244010"></a><a name="en-us_topic_0000001058830807_p412413244010"></a>Text to be measured</p> 438 </td> 439 </tr> 440 </tbody> 441 </table> 442 443- Return Value 444 445 <a name="en-us_topic_0000001058830807_table7220542174013"></a> 446 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row423494215402"><th class="cellrowborder" valign="top" width="19.75%" id="mcps1.1.3.1.1"><p id="en-us_topic_0000001058830807_p17234942104015"><a name="en-us_topic_0000001058830807_p17234942104015"></a><a name="en-us_topic_0000001058830807_p17234942104015"></a>Type</p> 447 </th> 448 <th class="cellrowborder" valign="top" width="80.25%" id="mcps1.1.3.1.2"><p id="en-us_topic_0000001058830807_p523424244012"><a name="en-us_topic_0000001058830807_p523424244012"></a><a name="en-us_topic_0000001058830807_p523424244012"></a>Description</p> 449 </th> 450 </tr> 451 </thead> 452 <tbody><tr id="en-us_topic_0000001058830807_row112341042174013"><td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.3.1.1 "><p id="en-us_topic_0000001058830807_p82348423405"><a name="en-us_topic_0000001058830807_p82348423405"></a><a name="en-us_topic_0000001058830807_p82348423405"></a>TextMetrics</p> 453 </td> 454 <td class="cellrowborder" valign="top" width="80.25%" headers="mcps1.1.3.1.2 "><p id="en-us_topic_0000001058830807_p0234134218407"><a name="en-us_topic_0000001058830807_p0234134218407"></a><a name="en-us_topic_0000001058830807_p0234134218407"></a>Object that contains the text width. You can obtain the width by <strong id="en-us_topic_0000001058830807_b149819152715"><a name="en-us_topic_0000001058830807_b149819152715"></a><a name="en-us_topic_0000001058830807_b149819152715"></a>TextMetrics.width</strong>.</p> 455 </td> 456 </tr> 457 </tbody> 458 </table> 459 460- Example 461 462  463 464 ``` 465 ctx.font = '25px sans-serif'; 466 var txt = 'Hello World'; 467 ctx.fillText("width:" + ctx.measureText(txt).width, 20, 60); 468 ctx.fillText(txt, 20, 110); 469 ``` 470 471 472## lineWidth<a name="en-us_topic_0000001058830807_section652391716583"></a> 473 474Sets the width of a line. 475 476- Parameter 477 478 <a name="en-us_topic_0000001058830807_table17891539144119"></a> 479 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row1809639144111"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p1180913399418"><a name="en-us_topic_0000001058830807_p1180913399418"></a><a name="en-us_topic_0000001058830807_p1180913399418"></a>Name</p> 480 </th> 481 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p480923915415"><a name="en-us_topic_0000001058830807_p480923915415"></a><a name="en-us_topic_0000001058830807_p480923915415"></a>Type</p> 482 </th> 483 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p580983913417"><a name="en-us_topic_0000001058830807_p580983913417"></a><a name="en-us_topic_0000001058830807_p580983913417"></a>Description</p> 484 </th> 485 </tr> 486 </thead> 487 <tbody><tr id="en-us_topic_0000001058830807_row380920398414"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p180913920418"><a name="en-us_topic_0000001058830807_p180913920418"></a><a name="en-us_topic_0000001058830807_p180913920418"></a>lineWidth</p> 488 </td> 489 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p19809203918412"><a name="en-us_topic_0000001058830807_p19809203918412"></a><a name="en-us_topic_0000001058830807_p19809203918412"></a>number</p> 490 </td> 491 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p10809183919414"><a name="en-us_topic_0000001058830807_p10809183919414"></a><a name="en-us_topic_0000001058830807_p10809183919414"></a>Line width</p> 492 </td> 493 </tr> 494 </tbody> 495 </table> 496 497- Return Value 498 499 N/A 500 501- Example 502 503  504 505 ``` 506 ctx.lineWidth = 5; 507 ctx.strokeRect(25, 25, 85, 105); 508 ``` 509 510 511## strokeStyle<a name="en-us_topic_0000001058830807_section1191517562337"></a> 512 513Sets the stroke style. 514 515- Parameter 516 517 <a name="en-us_topic_0000001058830807_table1534725211489"></a> 518 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row1536918529482"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p18369145254815"><a name="en-us_topic_0000001058830807_p18369145254815"></a><a name="en-us_topic_0000001058830807_p18369145254815"></a>Name</p> 519 </th> 520 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p173696523483"><a name="en-us_topic_0000001058830807_p173696523483"></a><a name="en-us_topic_0000001058830807_p173696523483"></a>Type</p> 521 </th> 522 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p936975274812"><a name="en-us_topic_0000001058830807_p936975274812"></a><a name="en-us_topic_0000001058830807_p936975274812"></a>Description</p> 523 </th> 524 </tr> 525 </thead> 526 <tbody><tr id="en-us_topic_0000001058830807_row20369155219485"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p13369152194810"><a name="en-us_topic_0000001058830807_p13369152194810"></a><a name="en-us_topic_0000001058830807_p13369152194810"></a>color</p> 527 </td> 528 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p236911525481"><a name="en-us_topic_0000001058830807_p236911525481"></a><a name="en-us_topic_0000001058830807_p236911525481"></a><color></p> 529 </td> 530 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p133695524481"><a name="en-us_topic_0000001058830807_p133695524481"></a><a name="en-us_topic_0000001058830807_p133695524481"></a>Color of the stroke.</p> 531 </td> 532 </tr> 533 <tr id="en-us_topic_0000001058830807_row6369175274810"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p136985218484"><a name="en-us_topic_0000001058830807_p136985218484"></a><a name="en-us_topic_0000001058830807_p136985218484"></a>gradient</p> 534 </td> 535 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p43691152174819"><a name="en-us_topic_0000001058830807_p43691152174819"></a><a name="en-us_topic_0000001058830807_p43691152174819"></a>CanvasGradient</p> 536 </td> 537 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p143696525482"><a name="en-us_topic_0000001058830807_p143696525482"></a><a name="en-us_topic_0000001058830807_p143696525482"></a>CanvasGradient object created via <strong id="en-us_topic_0000001058830807_b20772224183114"><a name="en-us_topic_0000001058830807_b20772224183114"></a><a name="en-us_topic_0000001058830807_b20772224183114"></a>createLinearGradient()</strong></p> 538 </td> 539 </tr> 540 <tr id="en-us_topic_0000001058830807_row636925214814"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p936995210482"><a name="en-us_topic_0000001058830807_p936995210482"></a><a name="en-us_topic_0000001058830807_p936995210482"></a>pattern</p> 541 </td> 542 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p836945224820"><a name="en-us_topic_0000001058830807_p836945224820"></a><a name="en-us_topic_0000001058830807_p836945224820"></a>CanvasPattern</p> 543 </td> 544 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p17369105219485"><a name="en-us_topic_0000001058830807_p17369105219485"></a><a name="en-us_topic_0000001058830807_p17369105219485"></a>CanvasPattern object created via <strong id="en-us_topic_0000001058830807_b19256439494"><a name="en-us_topic_0000001058830807_b19256439494"></a><a name="en-us_topic_0000001058830807_b19256439494"></a>createPattern()</strong></p> 545 </td> 546 </tr> 547 </tbody> 548 </table> 549 550- Return Value 551 552 N/A 553 554- Example 555 556  557 558 ``` 559 ctx.lineWidth = 10; 560 ctx.strokeStyle = '#0000ff'; 561 ctx.strokeRect(25, 25, 155, 105); 562 ``` 563 564 565## stroke\(\)<a name="en-us_topic_0000001058830807_section1071523411019"></a> 566 567Draws a stroke. 568 569- Parameter 570 571 N/A 572 573- Return Value 574 575 N/A 576 577- Example 578 579  580 581 ``` 582 ctx.moveTo(25, 25); 583 ctx.lineTo(25, 105); 584 ctx.strokeStyle = 'rgb(0,0,255)'; 585 ctx.stroke(); 586 ``` 587 588 589## beginPath\(\)<a name="en-us_topic_0000001058830807_section12670134392"></a> 590 591Creates a drawing path. 592 593- Parameter 594 595 N/A 596 597- Return Value 598 599 N/A 600 601- Example 602 603  604 605 ``` 606 ctx.beginPath(); 607 ctx.lineWidth = '6'; 608 ctx.strokeStyle = '#0000ff'; 609 ctx.moveTo(15, 80); 610 ctx.lineTo(280, 160); 611 ctx.stroke(); 612 ``` 613 614 615## moveTo\(\)<a name="en-us_topic_0000001058830807_section16813157310"></a> 616 617Moves a drawing path to a target position on the canvas. 618 619- Parameter 620 621 <a name="en-us_topic_0000001058830807_table6168163119523"></a> 622 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row718813118525"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p1018812317521"><a name="en-us_topic_0000001058830807_p1018812317521"></a><a name="en-us_topic_0000001058830807_p1018812317521"></a>Name</p> 623 </th> 624 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p1718812319522"><a name="en-us_topic_0000001058830807_p1718812319522"></a><a name="en-us_topic_0000001058830807_p1718812319522"></a>Type</p> 625 </th> 626 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p1818893118526"><a name="en-us_topic_0000001058830807_p1818893118526"></a><a name="en-us_topic_0000001058830807_p1818893118526"></a>Description</p> 627 </th> 628 </tr> 629 </thead> 630 <tbody><tr id="en-us_topic_0000001058830807_row918893175210"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p11188231135210"><a name="en-us_topic_0000001058830807_p11188231135210"></a><a name="en-us_topic_0000001058830807_p11188231135210"></a>x</p> 631 </td> 632 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p151888317527"><a name="en-us_topic_0000001058830807_p151888317527"></a><a name="en-us_topic_0000001058830807_p151888317527"></a>number</p> 633 </td> 634 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p2018811311525"><a name="en-us_topic_0000001058830807_p2018811311525"></a><a name="en-us_topic_0000001058830807_p2018811311525"></a>X-coordinate of the target position</p> 635 </td> 636 </tr> 637 <tr id="en-us_topic_0000001058830807_row7188731185211"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p161881131155213"><a name="en-us_topic_0000001058830807_p161881131155213"></a><a name="en-us_topic_0000001058830807_p161881131155213"></a>y</p> 638 </td> 639 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p1118863119528"><a name="en-us_topic_0000001058830807_p1118863119528"></a><a name="en-us_topic_0000001058830807_p1118863119528"></a>number</p> 640 </td> 641 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p121881431135219"><a name="en-us_topic_0000001058830807_p121881431135219"></a><a name="en-us_topic_0000001058830807_p121881431135219"></a>Y-coordinate of the target position</p> 642 </td> 643 </tr> 644 </tbody> 645 </table> 646 647- Return Value 648 649 N/A 650 651- Example 652 653  654 655 ``` 656 ctx.beginPath(); 657 ctx.moveTo(10, 10); 658 ctx.lineTo(280, 160); 659 ctx.stroke(); 660 ``` 661 662 663## lineTo\(\)<a name="en-us_topic_0000001058830807_section4767915838"></a> 664 665Connects the current point to a target position using a straight line. 666 667- Parameter 668 669 <a name="en-us_topic_0000001058830807_table05782010185317"></a> 670 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row115971910155315"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p10597310185318"><a name="en-us_topic_0000001058830807_p10597310185318"></a><a name="en-us_topic_0000001058830807_p10597310185318"></a>Name</p> 671 </th> 672 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p659741010538"><a name="en-us_topic_0000001058830807_p659741010538"></a><a name="en-us_topic_0000001058830807_p659741010538"></a>Type</p> 673 </th> 674 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p859731055315"><a name="en-us_topic_0000001058830807_p859731055315"></a><a name="en-us_topic_0000001058830807_p859731055315"></a>Description</p> 675 </th> 676 </tr> 677 </thead> 678 <tbody><tr id="en-us_topic_0000001058830807_row65971610135310"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p135975108534"><a name="en-us_topic_0000001058830807_p135975108534"></a><a name="en-us_topic_0000001058830807_p135975108534"></a>x</p> 679 </td> 680 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p1259751035317"><a name="en-us_topic_0000001058830807_p1259751035317"></a><a name="en-us_topic_0000001058830807_p1259751035317"></a>number</p> 681 </td> 682 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p6597161085317"><a name="en-us_topic_0000001058830807_p6597161085317"></a><a name="en-us_topic_0000001058830807_p6597161085317"></a>X-coordinate of the target position</p> 683 </td> 684 </tr> 685 <tr id="en-us_topic_0000001058830807_row9597111045310"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p105977106537"><a name="en-us_topic_0000001058830807_p105977106537"></a><a name="en-us_topic_0000001058830807_p105977106537"></a>y</p> 686 </td> 687 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p7597110205313"><a name="en-us_topic_0000001058830807_p7597110205313"></a><a name="en-us_topic_0000001058830807_p7597110205313"></a>number</p> 688 </td> 689 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p175971010185313"><a name="en-us_topic_0000001058830807_p175971010185313"></a><a name="en-us_topic_0000001058830807_p175971010185313"></a>Y-coordinate of the target position</p> 690 </td> 691 </tr> 692 </tbody> 693 </table> 694 695- Return Value 696 697 N/A 698 699- Example 700 701  702 703 ``` 704 ctx.beginPath(); 705 ctx.moveTo(10, 10); 706 ctx.lineTo(280, 160); 707 ctx.stroke(); 708 ``` 709 710 711## closePath\(\)<a name="en-us_topic_0000001058830807_section86825473917"></a> 712 713Draws a closed path. 714 715- Parameter 716 717 N/A 718 719- Return Value 720 721 N/A 722 723- Example 724 725  726 727 ``` 728 ctx.beginPath(); 729 ctx.moveTo(30, 30); 730 ctx.lineTo(110, 30); 731 ctx.lineTo(70, 90); 732 ctx.closePath(); 733 ctx.stroke(); 734 ``` 735 736 737## lineCap<a name="en-us_topic_0000001058830807_section6852133718410"></a> 738 739Sets the style of line endpoints. 740 741- Parameter 742 743 <a name="en-us_topic_0000001058830807_table370016264426"></a> 744 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row197237269420"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p172302664212"><a name="en-us_topic_0000001058830807_p172302664212"></a><a name="en-us_topic_0000001058830807_p172302664212"></a>Name</p> 745 </th> 746 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p672392611421"><a name="en-us_topic_0000001058830807_p672392611421"></a><a name="en-us_topic_0000001058830807_p672392611421"></a>Type</p> 747 </th> 748 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p18723142620426"><a name="en-us_topic_0000001058830807_p18723142620426"></a><a name="en-us_topic_0000001058830807_p18723142620426"></a>Description</p> 749 </th> 750 </tr> 751 </thead> 752 <tbody><tr id="en-us_topic_0000001058830807_row4723142619429"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p172302620422"><a name="en-us_topic_0000001058830807_p172302620422"></a><a name="en-us_topic_0000001058830807_p172302620422"></a>lineCap</p> 753 </td> 754 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p572313267429"><a name="en-us_topic_0000001058830807_p572313267429"></a><a name="en-us_topic_0000001058830807_p572313267429"></a>string</p> 755 </td> 756 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p1772310269428"><a name="en-us_topic_0000001058830807_p1772310269428"></a><a name="en-us_topic_0000001058830807_p1772310269428"></a>Style of line endpoints. Available values include:</p> 757 <a name="en-us_topic_0000001058830807_ul9807121877"></a><a name="en-us_topic_0000001058830807_ul9807121877"></a><ul id="en-us_topic_0000001058830807_ul9807121877"><li><strong id="en-us_topic_0000001058830807_b204249212417"><a name="en-us_topic_0000001058830807_b204249212417"></a><a name="en-us_topic_0000001058830807_b204249212417"></a>butt</strong> (default): The endpoints of the line are squared off.</li><li><strong id="en-us_topic_0000001058830807_b515476436"><a name="en-us_topic_0000001058830807_b515476436"></a><a name="en-us_topic_0000001058830807_b515476436"></a>round</strong>: The endpoints of the line are rounded.</li><li><strong id="en-us_topic_0000001058830807_b102772221517"><a name="en-us_topic_0000001058830807_b102772221517"></a><a name="en-us_topic_0000001058830807_b102772221517"></a>square</strong>: The endpoints of the line are squared off, and each endpoint has added a rectangle whose length is the same as the line thickness and whose width is half of the line thickness.</li></ul> 758 </td> 759 </tr> 760 </tbody> 761 </table> 762 763- Return Value 764 765 N/A 766 767- Example 768 769  770 771 ``` 772 ctx.lineWidth = 8; 773 ctx.beginPath(); 774 ctx.lineCap = 'round'; 775 ctx.moveTo(30, 50); 776 ctx.lineTo(220, 50); 777 ctx.stroke(); 778 ``` 779 780 781## lineJoin<a name="en-us_topic_0000001058830807_section395812401442"></a> 782 783Sets the style for the point where two lines intersect. 784 785- Parameter 786 787 <a name="en-us_topic_0000001058830807_table32162018433"></a> 788 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row1825620104314"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p1425122074313"><a name="en-us_topic_0000001058830807_p1425122074313"></a><a name="en-us_topic_0000001058830807_p1425122074313"></a>Name</p> 789 </th> 790 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p425112004316"><a name="en-us_topic_0000001058830807_p425112004316"></a><a name="en-us_topic_0000001058830807_p425112004316"></a>Type</p> 791 </th> 792 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p142515206438"><a name="en-us_topic_0000001058830807_p142515206438"></a><a name="en-us_topic_0000001058830807_p142515206438"></a>Description</p> 793 </th> 794 </tr> 795 </thead> 796 <tbody><tr id="en-us_topic_0000001058830807_row1251220154315"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p1825132016431"><a name="en-us_topic_0000001058830807_p1825132016431"></a><a name="en-us_topic_0000001058830807_p1825132016431"></a>lineJoin</p> 797 </td> 798 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p152562012436"><a name="en-us_topic_0000001058830807_p152562012436"></a><a name="en-us_topic_0000001058830807_p152562012436"></a>string</p> 799 </td> 800 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p125162019435"><a name="en-us_topic_0000001058830807_p125162019435"></a><a name="en-us_topic_0000001058830807_p125162019435"></a>Intersection style. Available values include:</p> 801 <a name="en-us_topic_0000001058830807_ul1717215412215"></a><a name="en-us_topic_0000001058830807_ul1717215412215"></a><ul id="en-us_topic_0000001058830807_ul1717215412215"><li><strong id="en-us_topic_0000001058830807_b575817301664"><a name="en-us_topic_0000001058830807_b575817301664"></a><a name="en-us_topic_0000001058830807_b575817301664"></a>round</strong>: The intersection is a sector, whose radius at the rounded corner is equal to the line width.</li><li><strong id="en-us_topic_0000001058830807_b349904219610"><a name="en-us_topic_0000001058830807_b349904219610"></a><a name="en-us_topic_0000001058830807_b349904219610"></a>bevel</strong>: The intersection is a triangle. The rectangular corner of each line is independent.</li><li><strong id="en-us_topic_0000001058830807_b331175619617"><a name="en-us_topic_0000001058830807_b331175619617"></a><a name="en-us_topic_0000001058830807_b331175619617"></a>miter</strong> (default): The intersection has a miter corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in <strong id="en-us_topic_0000001058830807_b1817771810523"><a name="en-us_topic_0000001058830807_b1817771810523"></a><a name="en-us_topic_0000001058830807_b1817771810523"></a>miterLimit</strong>.</li></ul> 802 </td> 803 </tr> 804 </tbody> 805 </table> 806 807- Return Value 808 809 N/A 810 811- Example 812 813  814 815 ``` 816 ctx.beginPath(); 817 ctx.lineWidth = 8; 818 ctx.lineJoin = 'miter'; 819 ctx.moveTo(30, 30); 820 ctx.lineTo(120, 60); 821 ctx.lineTo(30, 110); 822 ctx.stroke(); 823 ``` 824 825 826## miterLimit<a name="en-us_topic_0000001058830807_section429711421945"></a> 827 828Sets the maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet. 829 830- Parameter 831 832 <a name="en-us_topic_0000001058830807_table1097514385448"></a> 833 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row20997538104419"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p699753818446"><a name="en-us_topic_0000001058830807_p699753818446"></a><a name="en-us_topic_0000001058830807_p699753818446"></a>Name</p> 834 </th> 835 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p59971338204410"><a name="en-us_topic_0000001058830807_p59971338204410"></a><a name="en-us_topic_0000001058830807_p59971338204410"></a>Type</p> 836 </th> 837 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p119970385446"><a name="en-us_topic_0000001058830807_p119970385446"></a><a name="en-us_topic_0000001058830807_p119970385446"></a>Description</p> 838 </th> 839 </tr> 840 </thead> 841 <tbody><tr id="en-us_topic_0000001058830807_row1599711383441"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p13997203818448"><a name="en-us_topic_0000001058830807_p13997203818448"></a><a name="en-us_topic_0000001058830807_p13997203818448"></a>miterLimit</p> 842 </td> 843 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p1099773884410"><a name="en-us_topic_0000001058830807_p1099773884410"></a><a name="en-us_topic_0000001058830807_p1099773884410"></a>number</p> 844 </td> 845 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p1799711382448"><a name="en-us_topic_0000001058830807_p1799711382448"></a><a name="en-us_topic_0000001058830807_p1799711382448"></a>Maximum miter length. The default value is <strong id="en-us_topic_0000001058830807_b145736591563"><a name="en-us_topic_0000001058830807_b145736591563"></a><a name="en-us_topic_0000001058830807_b145736591563"></a>10</strong>.</p> 846 </td> 847 </tr> 848 </tbody> 849 </table> 850 851- Return Value 852 853 N/A 854 855- Example 856 857  858 859 ``` 860 ctx.lineWidth = 8; 861 ctx.lineJoin = 'miter'; 862 ctx.miterLimit = 3; 863 ctx.moveTo(30, 30); 864 ctx.lineTo(60, 35); 865 ctx.lineTo(30, 37); 866 ctx.stroke(); 867 ``` 868 869 870## font<a name="en-us_topic_0000001058830807_section17597332121110"></a> 871 872Sets the font style. 873 874- Parameter 875 876 <a name="en-us_topic_0000001058830807_table0971429451"></a> 877 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row71163425451"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p20116144294520"><a name="en-us_topic_0000001058830807_p20116144294520"></a><a name="en-us_topic_0000001058830807_p20116144294520"></a>Name</p> 878 </th> 879 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p6116114214454"><a name="en-us_topic_0000001058830807_p6116114214454"></a><a name="en-us_topic_0000001058830807_p6116114214454"></a>Type</p> 880 </th> 881 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p181162042194519"><a name="en-us_topic_0000001058830807_p181162042194519"></a><a name="en-us_topic_0000001058830807_p181162042194519"></a>Description</p> 882 </th> 883 </tr> 884 </thead> 885 <tbody><tr id="en-us_topic_0000001058830807_row21171642124516"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p15117642164510"><a name="en-us_topic_0000001058830807_p15117642164510"></a><a name="en-us_topic_0000001058830807_p15117642164510"></a>value</p> 886 </td> 887 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p8117742114515"><a name="en-us_topic_0000001058830807_p8117742114515"></a><a name="en-us_topic_0000001058830807_p8117742114515"></a>string</p> 888 </td> 889 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p1711724219453"><a name="en-us_topic_0000001058830807_p1711724219453"></a><a name="en-us_topic_0000001058830807_p1711724219453"></a>Font style. <strong id="en-us_topic_0000001058830807_b34275463610"><a name="en-us_topic_0000001058830807_b34275463610"></a><a name="en-us_topic_0000001058830807_b34275463610"></a>sans-serif</strong>, <strong id="en-us_topic_0000001058830807_b17997165516366"><a name="en-us_topic_0000001058830807_b17997165516366"></a><a name="en-us_topic_0000001058830807_b17997165516366"></a>serif</strong>, <strong id="en-us_topic_0000001058830807_b82651400379"><a name="en-us_topic_0000001058830807_b82651400379"></a><a name="en-us_topic_0000001058830807_b82651400379"></a>monospace</strong> are supported.<span id="en-us_topic_0000001058830807_ph065925143115"><a name="en-us_topic_0000001058830807_ph065925143115"></a><a name="en-us_topic_0000001058830807_ph065925143115"></a> The default value is <strong id="en-us_topic_0000001058830807_b6187105618597"><a name="en-us_topic_0000001058830807_b6187105618597"></a><a name="en-us_topic_0000001058830807_b6187105618597"></a>14px sans-serif</strong>.</span>.</p> 890 <p id="en-us_topic_0000001058830807_p436195718191"><a name="en-us_topic_0000001058830807_p436195718191"></a><a name="en-us_topic_0000001058830807_p436195718191"></a>Syntax: <strong id="en-us_topic_0000001058830807_b1147645412495"><a name="en-us_topic_0000001058830807_b1147645412495"></a><a name="en-us_topic_0000001058830807_b1147645412495"></a>ctx.font="</strong><em id="en-us_topic_0000001058830807_i939019116505"><a name="en-us_topic_0000001058830807_i939019116505"></a><a name="en-us_topic_0000001058830807_i939019116505"></a>font-style font-weight font-size font-family</em><strong id="en-us_topic_0000001058830807_b82870511501"><a name="en-us_topic_0000001058830807_b82870511501"></a><a name="en-us_topic_0000001058830807_b82870511501"></a>"</strong><sup id="en-us_topic_0000001058830807_sup17486202715112"><a name="en-us_topic_0000001058830807_sup17486202715112"></a><a name="en-us_topic_0000001058830807_sup17486202715112"></a>5+</sup></p> 891 <p id="en-us_topic_0000001058830807_p152526210221"><a name="en-us_topic_0000001058830807_p152526210221"></a><a name="en-us_topic_0000001058830807_p152526210221"></a>Default value: <strong id="en-us_topic_0000001058830807_b12437613115015"><a name="en-us_topic_0000001058830807_b12437613115015"></a><a name="en-us_topic_0000001058830807_b12437613115015"></a>"normal normal 14px sans-serif"</strong></p> 892 <a name="en-us_topic_0000001058830807_ul1984020379012"></a><a name="en-us_topic_0000001058830807_ul1984020379012"></a><ul id="en-us_topic_0000001058830807_ul1984020379012"><li>(Optional) <strong id="en-us_topic_0000001058830807_b9465227135012"><a name="en-us_topic_0000001058830807_b9465227135012"></a><a name="en-us_topic_0000001058830807_b9465227135012"></a>font-style</strong>: specifies the font style. Available values are <strong id="en-us_topic_0000001058830807_b4480133814515"><a name="en-us_topic_0000001058830807_b4480133814515"></a><a name="en-us_topic_0000001058830807_b4480133814515"></a>normal</strong> and <strong id="en-us_topic_0000001058830807_b429212412515"><a name="en-us_topic_0000001058830807_b429212412515"></a><a name="en-us_topic_0000001058830807_b429212412515"></a>italic</strong>.</li><li>(Optional) <strong id="en-us_topic_0000001058830807_b12927144812511"><a name="en-us_topic_0000001058830807_b12927144812511"></a><a name="en-us_topic_0000001058830807_b12927144812511"></a>font-weight</strong>: specifies the font weight. Available values are as follows: <strong id="en-us_topic_0000001058830807_b18569101717521"><a name="en-us_topic_0000001058830807_b18569101717521"></a><a name="en-us_topic_0000001058830807_b18569101717521"></a>normal</strong>, <strong id="en-us_topic_0000001058830807_b65071919175216"><a name="en-us_topic_0000001058830807_b65071919175216"></a><a name="en-us_topic_0000001058830807_b65071919175216"></a>bold</strong>, <strong id="en-us_topic_0000001058830807_b14819112020525"><a name="en-us_topic_0000001058830807_b14819112020525"></a><a name="en-us_topic_0000001058830807_b14819112020525"></a>bolder</strong>, <strong id="en-us_topic_0000001058830807_b182191622115213"><a name="en-us_topic_0000001058830807_b182191622115213"></a><a name="en-us_topic_0000001058830807_b182191622115213"></a>lighter</strong>, <strong id="en-us_topic_0000001058830807_b1558212238522"><a name="en-us_topic_0000001058830807_b1558212238522"></a><a name="en-us_topic_0000001058830807_b1558212238522"></a>100</strong>, <strong id="en-us_topic_0000001058830807_b65166259526"><a name="en-us_topic_0000001058830807_b65166259526"></a><a name="en-us_topic_0000001058830807_b65166259526"></a>200</strong>, <strong id="en-us_topic_0000001058830807_b12269192717527"><a name="en-us_topic_0000001058830807_b12269192717527"></a><a name="en-us_topic_0000001058830807_b12269192717527"></a>300</strong>, <strong id="en-us_topic_0000001058830807_b168501428185220"><a name="en-us_topic_0000001058830807_b168501428185220"></a><a name="en-us_topic_0000001058830807_b168501428185220"></a>400</strong>, <strong id="en-us_topic_0000001058830807_b9180163010520"><a name="en-us_topic_0000001058830807_b9180163010520"></a><a name="en-us_topic_0000001058830807_b9180163010520"></a>500</strong>, <strong id="en-us_topic_0000001058830807_b12712163118529"><a name="en-us_topic_0000001058830807_b12712163118529"></a><a name="en-us_topic_0000001058830807_b12712163118529"></a>600</strong>, <strong id="en-us_topic_0000001058830807_b1346917330525"><a name="en-us_topic_0000001058830807_b1346917330525"></a><a name="en-us_topic_0000001058830807_b1346917330525"></a>700</strong>, <strong id="en-us_topic_0000001058830807_b1986310343529"><a name="en-us_topic_0000001058830807_b1986310343529"></a><a name="en-us_topic_0000001058830807_b1986310343529"></a>800</strong>, <strong id="en-us_topic_0000001058830807_b58371236155219"><a name="en-us_topic_0000001058830807_b58371236155219"></a><a name="en-us_topic_0000001058830807_b58371236155219"></a>900</strong></li><li>(Optional) <strong id="en-us_topic_0000001058830807_b17878599529"><a name="en-us_topic_0000001058830807_b17878599529"></a><a name="en-us_topic_0000001058830807_b17878599529"></a>font-size</strong>: specifies the font size and its row height. The unit can only be pixels. The default value is <strong id="en-us_topic_0000001058830807_b207380101456"><a name="en-us_topic_0000001058830807_b207380101456"></a><a name="en-us_topic_0000001058830807_b207380101456"></a>14px</strong>.</li><li>(Optional) <strong id="en-us_topic_0000001058830807_b209797382419"><a name="en-us_topic_0000001058830807_b209797382419"></a><a name="en-us_topic_0000001058830807_b209797382419"></a>font-family</strong>: specifies the font family. Available values are <strong id="en-us_topic_0000001058830807_b540642917517"><a name="en-us_topic_0000001058830807_b540642917517"></a><a name="en-us_topic_0000001058830807_b540642917517"></a>sans-serif</strong>, <strong id="en-us_topic_0000001058830807_b13125163212510"><a name="en-us_topic_0000001058830807_b13125163212510"></a><a name="en-us_topic_0000001058830807_b13125163212510"></a>serif</strong>, and <strong id="en-us_topic_0000001058830807_b10316334151"><a name="en-us_topic_0000001058830807_b10316334151"></a><a name="en-us_topic_0000001058830807_b10316334151"></a>monospace</strong>.</li></ul> 893 </td> 894 </tr> 895 </tbody> 896 </table> 897 898- Return Value 899 900 N/A 901 902- Example 903 904  905 906 ``` 907 ctx.font = '30px sans-serif'; 908 ctx.fillText("Hello World", 20, 60); 909 ``` 910 911 912## textAlign<a name="en-us_topic_0000001058830807_section15681153321114"></a> 913 914Sets the text alignment mode. 915 916- Parameter 917 918 <a name="en-us_topic_0000001058830807_table73131824144612"></a> 919 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row532818249469"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p132816246468"><a name="en-us_topic_0000001058830807_p132816246468"></a><a name="en-us_topic_0000001058830807_p132816246468"></a>Name</p> 920 </th> 921 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p532882424617"><a name="en-us_topic_0000001058830807_p532882424617"></a><a name="en-us_topic_0000001058830807_p532882424617"></a>Type</p> 922 </th> 923 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p15328122415465"><a name="en-us_topic_0000001058830807_p15328122415465"></a><a name="en-us_topic_0000001058830807_p15328122415465"></a>Description</p> 924 </th> 925 </tr> 926 </thead> 927 <tbody><tr id="en-us_topic_0000001058830807_row103286247461"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p132917244468"><a name="en-us_topic_0000001058830807_p132917244468"></a><a name="en-us_topic_0000001058830807_p132917244468"></a>align</p> 928 </td> 929 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p123296247468"><a name="en-us_topic_0000001058830807_p123296247468"></a><a name="en-us_topic_0000001058830807_p123296247468"></a>string</p> 930 </td> 931 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p6170185410516"><a name="en-us_topic_0000001058830807_p6170185410516"></a><a name="en-us_topic_0000001058830807_p6170185410516"></a>Text alignment mode. Available values include:</p> 932 <a name="en-us_topic_0000001058830807_ul12274577810"></a><a name="en-us_topic_0000001058830807_ul12274577810"></a><ul id="en-us_topic_0000001058830807_ul12274577810"><li><strong id="en-us_topic_0000001058830807_b647924541316"><a name="en-us_topic_0000001058830807_b647924541316"></a><a name="en-us_topic_0000001058830807_b647924541316"></a>left</strong> (default): The text is left-aligned.</li><li><strong id="en-us_topic_0000001058830807_b9727182911158"><a name="en-us_topic_0000001058830807_b9727182911158"></a><a name="en-us_topic_0000001058830807_b9727182911158"></a>right</strong>: The text is right-aligned.</li><li><strong id="en-us_topic_0000001058830807_b12166174551511"><a name="en-us_topic_0000001058830807_b12166174551511"></a><a name="en-us_topic_0000001058830807_b12166174551511"></a>center</strong>: The text is center-aligned.</li><li><strong id="en-us_topic_0000001058830807_b34311647161"><a name="en-us_topic_0000001058830807_b34311647161"></a><a name="en-us_topic_0000001058830807_b34311647161"></a>start</strong>: The text is aligned with the start bound.</li><li><strong id="en-us_topic_0000001058830807_b1142411721715"><a name="en-us_topic_0000001058830807_b1142411721715"></a><a name="en-us_topic_0000001058830807_b1142411721715"></a>end</strong>: The text is aligned with the end bound.</li></ul> 933 <div class="note" id="en-us_topic_0000001058830807_note1344535811710"><a name="en-us_topic_0000001058830807_note1344535811710"></a><a name="en-us_topic_0000001058830807_note1344535811710"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001058830807_p1854535417539"><a name="en-us_topic_0000001058830807_p1854535417539"></a><a name="en-us_topic_0000001058830807_p1854535417539"></a>In the <strong id="en-us_topic_0000001058830807_b103519137204"><a name="en-us_topic_0000001058830807_b103519137204"></a><a name="en-us_topic_0000001058830807_b103519137204"></a>ltr</strong> layout mode, the value <strong id="en-us_topic_0000001058830807_b138412336203"><a name="en-us_topic_0000001058830807_b138412336203"></a><a name="en-us_topic_0000001058830807_b138412336203"></a>start</strong> is equal to <strong id="en-us_topic_0000001058830807_b1455616432206"><a name="en-us_topic_0000001058830807_b1455616432206"></a><a name="en-us_topic_0000001058830807_b1455616432206"></a>left</strong>. In the <strong id="en-us_topic_0000001058830807_b10994205116207"><a name="en-us_topic_0000001058830807_b10994205116207"></a><a name="en-us_topic_0000001058830807_b10994205116207"></a>rtl</strong> layout mode, the value <strong id="en-us_topic_0000001058830807_b111803022115"><a name="en-us_topic_0000001058830807_b111803022115"></a><a name="en-us_topic_0000001058830807_b111803022115"></a>start</strong> is equal to <strong id="en-us_topic_0000001058830807_b6282158182118"><a name="en-us_topic_0000001058830807_b6282158182118"></a><a name="en-us_topic_0000001058830807_b6282158182118"></a>right</strong>.</p> 934 </div></div> 935 </td> 936 </tr> 937 </tbody> 938 </table> 939 940- Return Value 941 942 N/A 943 944- Example 945 946  947 948 ``` 949 ctx.strokeStyle = '#0000ff'; 950 ctx.moveTo(140, 10); 951 ctx.lineTo(140, 160); 952 ctx.stroke(); 953 954 ctx.font = '18px sans-serif'; 955 956 // Show the textAlign values. 957 ctx.textAlign = 'start'; 958 ctx.fillText('textAlign=start', 140, 60); 959 ctx.textAlign = 'end'; 960 ctx.fillText('textAlign=end', 140, 80); 961 ctx.textAlign = 'left'; 962 ctx.fillText('textAlign=left', 140, 100); 963 ctx.textAlign = 'center'; 964 ctx.fillText('textAlign=center',140, 120); 965 ctx.textAlign = 'right'; 966 ctx.fillText('textAlign=right',140, 140); 967 ``` 968 969 970## textBaseline<a name="en-us_topic_0000001058830807_section77981136141111"></a> 971 972Sets a text baseline in the horizontal direction for text alignment. 973 974- Parameter 975 976 <a name="en-us_topic_0000001058830807_table7291181034711"></a> 977 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row20362910144715"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p143621010174717"><a name="en-us_topic_0000001058830807_p143621010174717"></a><a name="en-us_topic_0000001058830807_p143621010174717"></a>Name</p> 978 </th> 979 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p1336201014716"><a name="en-us_topic_0000001058830807_p1336201014716"></a><a name="en-us_topic_0000001058830807_p1336201014716"></a>Type</p> 980 </th> 981 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p18362310124718"><a name="en-us_topic_0000001058830807_p18362310124718"></a><a name="en-us_topic_0000001058830807_p18362310124718"></a>Description</p> 982 </th> 983 </tr> 984 </thead> 985 <tbody><tr id="en-us_topic_0000001058830807_row11362141010475"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p163621110144715"><a name="en-us_topic_0000001058830807_p163621110144715"></a><a name="en-us_topic_0000001058830807_p163621110144715"></a>textBaseline</p> 986 </td> 987 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p183621610104715"><a name="en-us_topic_0000001058830807_p183621610104715"></a><a name="en-us_topic_0000001058830807_p183621610104715"></a>string</p> 988 </td> 989 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p711415819554"><a name="en-us_topic_0000001058830807_p711415819554"></a><a name="en-us_topic_0000001058830807_p711415819554"></a>Text baseline. Available values include:</p> 990 <a name="en-us_topic_0000001058830807_ul155261019389"></a><a name="en-us_topic_0000001058830807_ul155261019389"></a><ul id="en-us_topic_0000001058830807_ul155261019389"><li><strong id="en-us_topic_0000001058830807_b7319642182514"><a name="en-us_topic_0000001058830807_b7319642182514"></a><a name="en-us_topic_0000001058830807_b7319642182514"></a>alphabetic</strong> (default): The text baseline is the normal alphabetic baseline.</li><li><strong id="en-us_topic_0000001058830807_b232612514251"><a name="en-us_topic_0000001058830807_b232612514251"></a><a name="en-us_topic_0000001058830807_b232612514251"></a>top</strong>: The text baseline is on the top of the text bounding box.</li><li><strong id="en-us_topic_0000001058830807_b1581815532520"><a name="en-us_topic_0000001058830807_b1581815532520"></a><a name="en-us_topic_0000001058830807_b1581815532520"></a>hanging</strong>: The text baseline is a hanging baseline over the text.</li><li><strong id="en-us_topic_0000001058830807_b199155911255"><a name="en-us_topic_0000001058830807_b199155911255"></a><a name="en-us_topic_0000001058830807_b199155911255"></a>middle</strong>: The text baseline is in the middle of the text bounding box.</li><li><strong id="en-us_topic_0000001058830807_b19375174142615"><a name="en-us_topic_0000001058830807_b19375174142615"></a><a name="en-us_topic_0000001058830807_b19375174142615"></a>ideographic</strong>: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excessive character.</li><li><strong id="en-us_topic_0000001058830807_b1488614923012"><a name="en-us_topic_0000001058830807_b1488614923012"></a><a name="en-us_topic_0000001058830807_b1488614923012"></a>bottom</strong>: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.</li></ul> 991 </td> 992 </tr> 993 </tbody> 994 </table> 995 996- Return Value 997 998 N/A 999 1000- Example 1001 1002  1003 1004 ``` 1005 ctx.strokeStyle = '#0000ff'; 1006 ctx.moveTo(0, 120); 1007 ctx.lineTo(400, 120); 1008 ctx.stroke(); 1009 1010 ctx.font = '20px sans-serif'; 1011 1012 ctx.textBaseline = 'top'; 1013 ctx.fillText('Top', 10, 120); 1014 ctx.textBaseline = 'bottom'; 1015 ctx.fillText('Bottom', 55, 120); 1016 ctx.textBaseline = 'middle'; 1017 ctx.fillText('Middle', 125, 120); 1018 ctx.textBaseline = 'alphabetic'; 1019 ctx.fillText('Alphabetic', 195, 120); 1020 ctx.textBaseline = 'hanging'; 1021 ctx.fillText('Hanging', 295, 120); 1022 ``` 1023 1024 1025## createPattern\(\)<a name="en-us_topic_0000001058830807_section1034582183919"></a> 1026 1027Creates a pattern for image filling based on a specified source image and repetition mode. 1028 1029- Parameter 1030 1031 <a name="en-us_topic_0000001058830807_table10856104714495"></a> 1032 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row6877547164915"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p087713474499"><a name="en-us_topic_0000001058830807_p087713474499"></a><a name="en-us_topic_0000001058830807_p087713474499"></a>Name</p> 1033 </th> 1034 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p1877147104920"><a name="en-us_topic_0000001058830807_p1877147104920"></a><a name="en-us_topic_0000001058830807_p1877147104920"></a>Type</p> 1035 </th> 1036 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p17877144714910"><a name="en-us_topic_0000001058830807_p17877144714910"></a><a name="en-us_topic_0000001058830807_p17877144714910"></a>Description</p> 1037 </th> 1038 </tr> 1039 </thead> 1040 <tbody><tr id="en-us_topic_0000001058830807_row1387716471496"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p16877134713496"><a name="en-us_topic_0000001058830807_p16877134713496"></a><a name="en-us_topic_0000001058830807_p16877134713496"></a>image</p> 1041 </td> 1042 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p12877174784912"><a name="en-us_topic_0000001058830807_p12877174784912"></a><a name="en-us_topic_0000001058830807_p12877174784912"></a>Image</p> 1043 </td> 1044 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p12877164716490"><a name="en-us_topic_0000001058830807_p12877164716490"></a><a name="en-us_topic_0000001058830807_p12877164716490"></a>Source image. For details, see <a href="image-0.md#EN-US_TOPIC_0000001115974752">Image</a>.</p> 1045 </td> 1046 </tr> 1047 <tr id="en-us_topic_0000001058830807_row1887711479493"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p787764720494"><a name="en-us_topic_0000001058830807_p787764720494"></a><a name="en-us_topic_0000001058830807_p787764720494"></a>repetition</p> 1048 </td> 1049 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p387724714916"><a name="en-us_topic_0000001058830807_p387724714916"></a><a name="en-us_topic_0000001058830807_p387724714916"></a>string</p> 1050 </td> 1051 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p1787724716495"><a name="en-us_topic_0000001058830807_p1787724716495"></a><a name="en-us_topic_0000001058830807_p1787724716495"></a>Repetition mode. The value can be <strong id="en-us_topic_0000001058830807_b12719173916323"><a name="en-us_topic_0000001058830807_b12719173916323"></a><a name="en-us_topic_0000001058830807_b12719173916323"></a>"repeat"</strong>, <strong id="en-us_topic_0000001058830807_b126162415329"><a name="en-us_topic_0000001058830807_b126162415329"></a><a name="en-us_topic_0000001058830807_b126162415329"></a>"repeat-x"</strong>, <strong id="en-us_topic_0000001058830807_b19838174443218"><a name="en-us_topic_0000001058830807_b19838174443218"></a><a name="en-us_topic_0000001058830807_b19838174443218"></a>"repeat-y"</strong>, or <strong id="en-us_topic_0000001058830807_b216175618325"><a name="en-us_topic_0000001058830807_b216175618325"></a><a name="en-us_topic_0000001058830807_b216175618325"></a>"no-repeat"</strong>.</p> 1052 </td> 1053 </tr> 1054 </tbody> 1055 </table> 1056 1057- Return Value 1058 1059 <a name="en-us_topic_0000001058830807_table1693355133112"></a> 1060 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row49339514317"><th class="cellrowborder" valign="top" width="19.77%" id="mcps1.1.3.1.1"><p id="en-us_topic_0000001058830807_p17933145116314"><a name="en-us_topic_0000001058830807_p17933145116314"></a><a name="en-us_topic_0000001058830807_p17933145116314"></a>Type</p> 1061 </th> 1062 <th class="cellrowborder" valign="top" width="80.23%" id="mcps1.1.3.1.2"><p id="en-us_topic_0000001058830807_p15933155113310"><a name="en-us_topic_0000001058830807_p15933155113310"></a><a name="en-us_topic_0000001058830807_p15933155113310"></a>Description</p> 1063 </th> 1064 </tr> 1065 </thead> 1066 <tbody><tr id="en-us_topic_0000001058830807_row10934951103110"><td class="cellrowborder" valign="top" width="19.77%" headers="mcps1.1.3.1.1 "><p id="en-us_topic_0000001058830807_p11934145123116"><a name="en-us_topic_0000001058830807_p11934145123116"></a><a name="en-us_topic_0000001058830807_p11934145123116"></a>Object</p> 1067 </td> 1068 <td class="cellrowborder" valign="top" width="80.23%" headers="mcps1.1.3.1.2 "><p id="en-us_topic_0000001058830807_p16934351123117"><a name="en-us_topic_0000001058830807_p16934351123117"></a><a name="en-us_topic_0000001058830807_p16934351123117"></a>Pattern of image filling.</p> 1069 </td> 1070 </tr> 1071 </tbody> 1072 </table> 1073 1074- Example 1075 1076  1077 1078 ``` 1079 var pat = ctx.createPattern(img, 'repeat'); 1080 ctx.fillStyle = pat; 1081 ctx.fillRect(0, 0, 20, 20); 1082 ``` 1083 1084 1085## bezierCurveTo\(\)<a name="en-us_topic_0000001058830807_section450521614318"></a> 1086 1087Draws a cubic bezier curve on the canvas. 1088 1089- Parameter 1090 1091 <a name="en-us_topic_0000001058830807_table20386105825314"></a> 1092 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row15411458165315"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p1411155895315"><a name="en-us_topic_0000001058830807_p1411155895315"></a><a name="en-us_topic_0000001058830807_p1411155895315"></a>Name</p> 1093 </th> 1094 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p1541119580533"><a name="en-us_topic_0000001058830807_p1541119580533"></a><a name="en-us_topic_0000001058830807_p1541119580533"></a>Type</p> 1095 </th> 1096 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p84112058145319"><a name="en-us_topic_0000001058830807_p84112058145319"></a><a name="en-us_topic_0000001058830807_p84112058145319"></a>Description</p> 1097 </th> 1098 </tr> 1099 </thead> 1100 <tbody><tr id="en-us_topic_0000001058830807_row194112586539"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p23609395194"><a name="en-us_topic_0000001058830807_p23609395194"></a><a name="en-us_topic_0000001058830807_p23609395194"></a>cp1x</p> 1101 </td> 1102 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p173603394190"><a name="en-us_topic_0000001058830807_p173603394190"></a><a name="en-us_topic_0000001058830807_p173603394190"></a>number</p> 1103 </td> 1104 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p18360203981915"><a name="en-us_topic_0000001058830807_p18360203981915"></a><a name="en-us_topic_0000001058830807_p18360203981915"></a>X-coordinate of the first parameter of the bezier curve</p> 1105 </td> 1106 </tr> 1107 <tr id="en-us_topic_0000001058830807_row141135810535"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p336023910194"><a name="en-us_topic_0000001058830807_p336023910194"></a><a name="en-us_topic_0000001058830807_p336023910194"></a>cp1y</p> 1108 </td> 1109 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p20360173918194"><a name="en-us_topic_0000001058830807_p20360173918194"></a><a name="en-us_topic_0000001058830807_p20360173918194"></a>number</p> 1110 </td> 1111 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p13605397190"><a name="en-us_topic_0000001058830807_p13605397190"></a><a name="en-us_topic_0000001058830807_p13605397190"></a>Y-coordinate of the first parameter of the bezier curve</p> 1112 </td> 1113 </tr> 1114 <tr id="en-us_topic_0000001058830807_row164111358105315"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p17361123981919"><a name="en-us_topic_0000001058830807_p17361123981919"></a><a name="en-us_topic_0000001058830807_p17361123981919"></a>cp2x</p> 1115 </td> 1116 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p5361173901917"><a name="en-us_topic_0000001058830807_p5361173901917"></a><a name="en-us_topic_0000001058830807_p5361173901917"></a>number</p> 1117 </td> 1118 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p736183918197"><a name="en-us_topic_0000001058830807_p736183918197"></a><a name="en-us_topic_0000001058830807_p736183918197"></a>X-coordinate of the second parameter of the bezier curve</p> 1119 </td> 1120 </tr> 1121 <tr id="en-us_topic_0000001058830807_row185982415541"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p5361113911199"><a name="en-us_topic_0000001058830807_p5361113911199"></a><a name="en-us_topic_0000001058830807_p5361113911199"></a>cp2y</p> 1122 </td> 1123 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p15361139171916"><a name="en-us_topic_0000001058830807_p15361139171916"></a><a name="en-us_topic_0000001058830807_p15361139171916"></a>number</p> 1124 </td> 1125 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p23611039151912"><a name="en-us_topic_0000001058830807_p23611039151912"></a><a name="en-us_topic_0000001058830807_p23611039151912"></a>Y-coordinate of the second parameter of the bezier curve</p> 1126 </td> 1127 </tr> 1128 <tr id="en-us_topic_0000001058830807_row826242931913"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p17361143918198"><a name="en-us_topic_0000001058830807_p17361143918198"></a><a name="en-us_topic_0000001058830807_p17361143918198"></a>x</p> 1129 </td> 1130 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p173611539131920"><a name="en-us_topic_0000001058830807_p173611539131920"></a><a name="en-us_topic_0000001058830807_p173611539131920"></a>number</p> 1131 </td> 1132 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p10361339111918"><a name="en-us_topic_0000001058830807_p10361339111918"></a><a name="en-us_topic_0000001058830807_p10361339111918"></a>X-coordinate of the end point on the bezier curve</p> 1133 </td> 1134 </tr> 1135 <tr id="en-us_topic_0000001058830807_row1045602931913"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p14361193916194"><a name="en-us_topic_0000001058830807_p14361193916194"></a><a name="en-us_topic_0000001058830807_p14361193916194"></a>y</p> 1136 </td> 1137 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p23612039131914"><a name="en-us_topic_0000001058830807_p23612039131914"></a><a name="en-us_topic_0000001058830807_p23612039131914"></a>number</p> 1138 </td> 1139 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p183611739201916"><a name="en-us_topic_0000001058830807_p183611739201916"></a><a name="en-us_topic_0000001058830807_p183611739201916"></a>Y-coordinate of the end point on the bezier curve</p> 1140 </td> 1141 </tr> 1142 </tbody> 1143 </table> 1144 1145- Return Value 1146 1147 N/A 1148 1149- Example 1150 1151 ``` 1152 ctx.beginPath(); 1153 ctx.moveTo(10, 10); 1154 ctx.bezierCurveTo(20, 100, 200, 100, 200, 20); 1155 ctx.stroke(); 1156 ``` 1157 1158 1159## quadraticCurveTo\(\)<a name="en-us_topic_0000001058830807_section12938183173"></a> 1160 1161Draws a quadratic curve on the canvas. 1162 1163- Parameter 1164 1165 <a name="en-us_topic_0000001058830807_table109941430581"></a> 1166 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row1499443014812"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p179941301485"><a name="en-us_topic_0000001058830807_p179941301485"></a><a name="en-us_topic_0000001058830807_p179941301485"></a>Name</p> 1167 </th> 1168 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p09941330382"><a name="en-us_topic_0000001058830807_p09941330382"></a><a name="en-us_topic_0000001058830807_p09941330382"></a>Type</p> 1169 </th> 1170 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p499411309812"><a name="en-us_topic_0000001058830807_p499411309812"></a><a name="en-us_topic_0000001058830807_p499411309812"></a>Description</p> 1171 </th> 1172 </tr> 1173 </thead> 1174 <tbody><tr id="en-us_topic_0000001058830807_row189942307819"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p1541115588531"><a name="en-us_topic_0000001058830807_p1541115588531"></a><a name="en-us_topic_0000001058830807_p1541115588531"></a>cpx</p> 1175 </td> 1176 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p5411158115317"><a name="en-us_topic_0000001058830807_p5411158115317"></a><a name="en-us_topic_0000001058830807_p5411158115317"></a>number</p> 1177 </td> 1178 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p14111558175312"><a name="en-us_topic_0000001058830807_p14111558175312"></a><a name="en-us_topic_0000001058830807_p14111558175312"></a>X-coordinate of the bezier curve parameter</p> 1179 </td> 1180 </tr> 1181 <tr id="en-us_topic_0000001058830807_row179951630484"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p641135820539"><a name="en-us_topic_0000001058830807_p641135820539"></a><a name="en-us_topic_0000001058830807_p641135820539"></a>cpy</p> 1182 </td> 1183 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p1441111584532"><a name="en-us_topic_0000001058830807_p1441111584532"></a><a name="en-us_topic_0000001058830807_p1441111584532"></a>number</p> 1184 </td> 1185 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p44114580539"><a name="en-us_topic_0000001058830807_p44114580539"></a><a name="en-us_topic_0000001058830807_p44114580539"></a>Y-coordinate of the bezier curve parameter</p> 1186 </td> 1187 </tr> 1188 <tr id="en-us_topic_0000001058830807_row13995183015811"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p44111958135320"><a name="en-us_topic_0000001058830807_p44111958135320"></a><a name="en-us_topic_0000001058830807_p44111958135320"></a>x</p> 1189 </td> 1190 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p14111358115313"><a name="en-us_topic_0000001058830807_p14111358115313"></a><a name="en-us_topic_0000001058830807_p14111358115313"></a>number</p> 1191 </td> 1192 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p2411115835318"><a name="en-us_topic_0000001058830807_p2411115835318"></a><a name="en-us_topic_0000001058830807_p2411115835318"></a>X-coordinate of the end point on the bezier curve</p> 1193 </td> 1194 </tr> 1195 <tr id="en-us_topic_0000001058830807_row149953301482"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p173571755546"><a name="en-us_topic_0000001058830807_p173571755546"></a><a name="en-us_topic_0000001058830807_p173571755546"></a>y</p> 1196 </td> 1197 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p43588511540"><a name="en-us_topic_0000001058830807_p43588511540"></a><a name="en-us_topic_0000001058830807_p43588511540"></a>number</p> 1198 </td> 1199 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p1635875105417"><a name="en-us_topic_0000001058830807_p1635875105417"></a><a name="en-us_topic_0000001058830807_p1635875105417"></a>Y-coordinate of the end point on the bezier curve</p> 1200 </td> 1201 </tr> 1202 </tbody> 1203 </table> 1204 1205- Return Value 1206 1207 N/A 1208 1209- Example 1210 1211  1212 1213 ``` 1214 ctx.beginPath(); 1215 ctx.moveTo(20, 20); 1216 ctx.quadraticCurveTo(100, 100, 200, 20); 1217 ctx.stroke(); 1218 ``` 1219 1220 1221## arc\(\)<a name="en-us_topic_0000001058830807_section102329511716"></a> 1222 1223Draws an arc on the canvas. 1224 1225- Parameter 1226 1227 <a name="en-us_topic_0000001058830807_table1924242125518"></a> 1228 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row1127315218557"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p227311285518"><a name="en-us_topic_0000001058830807_p227311285518"></a><a name="en-us_topic_0000001058830807_p227311285518"></a>Name</p> 1229 </th> 1230 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p162737213553"><a name="en-us_topic_0000001058830807_p162737213553"></a><a name="en-us_topic_0000001058830807_p162737213553"></a>Type</p> 1231 </th> 1232 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p11273123553"><a name="en-us_topic_0000001058830807_p11273123553"></a><a name="en-us_topic_0000001058830807_p11273123553"></a>Description</p> 1233 </th> 1234 </tr> 1235 </thead> 1236 <tbody><tr id="en-us_topic_0000001058830807_row1527314215554"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p82737245518"><a name="en-us_topic_0000001058830807_p82737245518"></a><a name="en-us_topic_0000001058830807_p82737245518"></a>x</p> 1237 </td> 1238 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p92733211553"><a name="en-us_topic_0000001058830807_p92733211553"></a><a name="en-us_topic_0000001058830807_p92733211553"></a>number</p> 1239 </td> 1240 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p5273423558"><a name="en-us_topic_0000001058830807_p5273423558"></a><a name="en-us_topic_0000001058830807_p5273423558"></a>X-coordinate of the center point of the arc</p> 1241 </td> 1242 </tr> 1243 <tr id="en-us_topic_0000001058830807_row132733255519"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p1527352175511"><a name="en-us_topic_0000001058830807_p1527352175511"></a><a name="en-us_topic_0000001058830807_p1527352175511"></a>y</p> 1244 </td> 1245 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p192731220550"><a name="en-us_topic_0000001058830807_p192731220550"></a><a name="en-us_topic_0000001058830807_p192731220550"></a>number</p> 1246 </td> 1247 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p527320245513"><a name="en-us_topic_0000001058830807_p527320245513"></a><a name="en-us_topic_0000001058830807_p527320245513"></a>Y-coordinate of the center point of the arc</p> 1248 </td> 1249 </tr> 1250 <tr id="en-us_topic_0000001058830807_row82734214551"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p42737218552"><a name="en-us_topic_0000001058830807_p42737218552"></a><a name="en-us_topic_0000001058830807_p42737218552"></a>radius</p> 1251 </td> 1252 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p1827312295511"><a name="en-us_topic_0000001058830807_p1827312295511"></a><a name="en-us_topic_0000001058830807_p1827312295511"></a>number</p> 1253 </td> 1254 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p1827315217559"><a name="en-us_topic_0000001058830807_p1827315217559"></a><a name="en-us_topic_0000001058830807_p1827315217559"></a>Radius of the arc</p> 1255 </td> 1256 </tr> 1257 <tr id="en-us_topic_0000001058830807_row132731724552"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p1727310213555"><a name="en-us_topic_0000001058830807_p1727310213555"></a><a name="en-us_topic_0000001058830807_p1727310213555"></a>startAngle</p> 1258 </td> 1259 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p112731628552"><a name="en-us_topic_0000001058830807_p112731628552"></a><a name="en-us_topic_0000001058830807_p112731628552"></a>number</p> 1260 </td> 1261 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p13273132135514"><a name="en-us_topic_0000001058830807_p13273132135514"></a><a name="en-us_topic_0000001058830807_p13273132135514"></a>Start radian of the arc</p> 1262 </td> 1263 </tr> 1264 <tr id="en-us_topic_0000001058830807_row4273728559"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p122730214554"><a name="en-us_topic_0000001058830807_p122730214554"></a><a name="en-us_topic_0000001058830807_p122730214554"></a>endAngle</p> 1265 </td> 1266 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p162747217557"><a name="en-us_topic_0000001058830807_p162747217557"></a><a name="en-us_topic_0000001058830807_p162747217557"></a>number</p> 1267 </td> 1268 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p1274112145513"><a name="en-us_topic_0000001058830807_p1274112145513"></a><a name="en-us_topic_0000001058830807_p1274112145513"></a>End radian of the arc</p> 1269 </td> 1270 </tr> 1271 <tr id="en-us_topic_0000001058830807_row1227416285512"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p92747265520"><a name="en-us_topic_0000001058830807_p92747265520"></a><a name="en-us_topic_0000001058830807_p92747265520"></a>anticlockwise</p> 1272 </td> 1273 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p327410216554"><a name="en-us_topic_0000001058830807_p327410216554"></a><a name="en-us_topic_0000001058830807_p327410216554"></a>boolean</p> 1274 </td> 1275 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p102742026555"><a name="en-us_topic_0000001058830807_p102742026555"></a><a name="en-us_topic_0000001058830807_p102742026555"></a>Whether to draw the arc counterclockwise</p> 1276 </td> 1277 </tr> 1278 </tbody> 1279 </table> 1280 1281- Return Value 1282 1283 N/A 1284 1285- Example 1286 1287  1288 1289 ``` 1290 ctx.beginPath(); 1291 ctx.arc(100, 75, 50, 0, 6.28); 1292 ctx.stroke(); 1293 ``` 1294 1295 1296## arcTo\(\)<a name="en-us_topic_0000001058830807_section3172156571"></a> 1297 1298Draws an arc based on the radius and points on the arc. 1299 1300- Parameter 1301 1302 <a name="en-us_topic_0000001058830807_table1320614135617"></a> 1303 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row1423481125614"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p723412110565"><a name="en-us_topic_0000001058830807_p723412110565"></a><a name="en-us_topic_0000001058830807_p723412110565"></a>Name</p> 1304 </th> 1305 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p123411135619"><a name="en-us_topic_0000001058830807_p123411135619"></a><a name="en-us_topic_0000001058830807_p123411135619"></a>Type</p> 1306 </th> 1307 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p82341216569"><a name="en-us_topic_0000001058830807_p82341216569"></a><a name="en-us_topic_0000001058830807_p82341216569"></a>Description</p> 1308 </th> 1309 </tr> 1310 </thead> 1311 <tbody><tr id="en-us_topic_0000001058830807_row523414155610"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p1423461105617"><a name="en-us_topic_0000001058830807_p1423461105617"></a><a name="en-us_topic_0000001058830807_p1423461105617"></a>x1</p> 1312 </td> 1313 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p12347118565"><a name="en-us_topic_0000001058830807_p12347118565"></a><a name="en-us_topic_0000001058830807_p12347118565"></a>number</p> 1314 </td> 1315 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p18234618568"><a name="en-us_topic_0000001058830807_p18234618568"></a><a name="en-us_topic_0000001058830807_p18234618568"></a>X-coordinate of the first point on the arc</p> 1316 </td> 1317 </tr> 1318 <tr id="en-us_topic_0000001058830807_row15234515560"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p0234131195618"><a name="en-us_topic_0000001058830807_p0234131195618"></a><a name="en-us_topic_0000001058830807_p0234131195618"></a>y1</p> 1319 </td> 1320 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p1223418112569"><a name="en-us_topic_0000001058830807_p1223418112569"></a><a name="en-us_topic_0000001058830807_p1223418112569"></a>number</p> 1321 </td> 1322 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p2023411135618"><a name="en-us_topic_0000001058830807_p2023411135618"></a><a name="en-us_topic_0000001058830807_p2023411135618"></a>Y-coordinate of the first point on the arc</p> 1323 </td> 1324 </tr> 1325 <tr id="en-us_topic_0000001058830807_row823411114560"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p1123513125614"><a name="en-us_topic_0000001058830807_p1123513125614"></a><a name="en-us_topic_0000001058830807_p1123513125614"></a>x2</p> 1326 </td> 1327 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p112351415564"><a name="en-us_topic_0000001058830807_p112351415564"></a><a name="en-us_topic_0000001058830807_p112351415564"></a>number</p> 1328 </td> 1329 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p1923513165616"><a name="en-us_topic_0000001058830807_p1923513165616"></a><a name="en-us_topic_0000001058830807_p1923513165616"></a>X-coordinate of the second point on the arc</p> 1330 </td> 1331 </tr> 1332 <tr id="en-us_topic_0000001058830807_row1923518155616"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p1623511155613"><a name="en-us_topic_0000001058830807_p1623511155613"></a><a name="en-us_topic_0000001058830807_p1623511155613"></a>y2</p> 1333 </td> 1334 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p13235113569"><a name="en-us_topic_0000001058830807_p13235113569"></a><a name="en-us_topic_0000001058830807_p13235113569"></a>number</p> 1335 </td> 1336 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p32351913568"><a name="en-us_topic_0000001058830807_p32351913568"></a><a name="en-us_topic_0000001058830807_p32351913568"></a>Y-coordinate of the second point on the arc</p> 1337 </td> 1338 </tr> 1339 <tr id="en-us_topic_0000001058830807_row122350195613"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p32354116565"><a name="en-us_topic_0000001058830807_p32354116565"></a><a name="en-us_topic_0000001058830807_p32354116565"></a>radius</p> 1340 </td> 1341 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p623561195612"><a name="en-us_topic_0000001058830807_p623561195612"></a><a name="en-us_topic_0000001058830807_p623561195612"></a>number</p> 1342 </td> 1343 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p42356185615"><a name="en-us_topic_0000001058830807_p42356185615"></a><a name="en-us_topic_0000001058830807_p42356185615"></a>Radius of the arc</p> 1344 </td> 1345 </tr> 1346 </tbody> 1347 </table> 1348 1349- Return Value 1350 1351 N/A 1352 1353- Example 1354 1355  1356 1357 ``` 1358 ctx.moveTo(100, 20); 1359 ctx.arcTo(150, 20, 150, 70, 50); // Create an arc. 1360 ctx.stroke(); 1361 ``` 1362 1363 1364## rect\(\)<a name="en-us_topic_0000001058830807_section1351519304107"></a> 1365 1366Creates a rectangle. 1367 1368- Parameter 1369 1370 <a name="en-us_topic_0000001058830807_table92131548185610"></a> 1371 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row9238348185613"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p723854810561"><a name="en-us_topic_0000001058830807_p723854810561"></a><a name="en-us_topic_0000001058830807_p723854810561"></a>Name</p> 1372 </th> 1373 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p2238144885615"><a name="en-us_topic_0000001058830807_p2238144885615"></a><a name="en-us_topic_0000001058830807_p2238144885615"></a>Type</p> 1374 </th> 1375 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p223814486561"><a name="en-us_topic_0000001058830807_p223814486561"></a><a name="en-us_topic_0000001058830807_p223814486561"></a>Description</p> 1376 </th> 1377 </tr> 1378 </thead> 1379 <tbody><tr id="en-us_topic_0000001058830807_row5238104813569"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p1423864816566"><a name="en-us_topic_0000001058830807_p1423864816566"></a><a name="en-us_topic_0000001058830807_p1423864816566"></a>x</p> 1380 </td> 1381 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p3238194814560"><a name="en-us_topic_0000001058830807_p3238194814560"></a><a name="en-us_topic_0000001058830807_p3238194814560"></a>number</p> 1382 </td> 1383 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p9238204818566"><a name="en-us_topic_0000001058830807_p9238204818566"></a><a name="en-us_topic_0000001058830807_p9238204818566"></a>X-coordinate of the upper left corner of the rectangle</p> 1384 </td> 1385 </tr> 1386 <tr id="en-us_topic_0000001058830807_row1423884816562"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p132383488563"><a name="en-us_topic_0000001058830807_p132383488563"></a><a name="en-us_topic_0000001058830807_p132383488563"></a>y</p> 1387 </td> 1388 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p02395487560"><a name="en-us_topic_0000001058830807_p02395487560"></a><a name="en-us_topic_0000001058830807_p02395487560"></a>number</p> 1389 </td> 1390 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p523934819568"><a name="en-us_topic_0000001058830807_p523934819568"></a><a name="en-us_topic_0000001058830807_p523934819568"></a>Y-coordinate of the upper left corner of the rectangle</p> 1391 </td> 1392 </tr> 1393 <tr id="en-us_topic_0000001058830807_row723954815563"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p182391481565"><a name="en-us_topic_0000001058830807_p182391481565"></a><a name="en-us_topic_0000001058830807_p182391481565"></a>width</p> 1394 </td> 1395 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p142391648145610"><a name="en-us_topic_0000001058830807_p142391648145610"></a><a name="en-us_topic_0000001058830807_p142391648145610"></a>number</p> 1396 </td> 1397 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p523919486569"><a name="en-us_topic_0000001058830807_p523919486569"></a><a name="en-us_topic_0000001058830807_p523919486569"></a>Width of the rectangle</p> 1398 </td> 1399 </tr> 1400 <tr id="en-us_topic_0000001058830807_row1723924885618"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p1923934820561"><a name="en-us_topic_0000001058830807_p1923934820561"></a><a name="en-us_topic_0000001058830807_p1923934820561"></a>height</p> 1401 </td> 1402 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p13239448135615"><a name="en-us_topic_0000001058830807_p13239448135615"></a><a name="en-us_topic_0000001058830807_p13239448135615"></a>number</p> 1403 </td> 1404 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p523924819568"><a name="en-us_topic_0000001058830807_p523924819568"></a><a name="en-us_topic_0000001058830807_p523924819568"></a>Height of the rectangle</p> 1405 </td> 1406 </tr> 1407 </tbody> 1408 </table> 1409 1410- Return Value 1411 1412 N/A 1413 1414- Example 1415 1416  1417 1418 ``` 1419 ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20) 1420 ctx.stroke(); // Draw it 1421 ``` 1422 1423 1424## fill\(\)<a name="en-us_topic_0000001058830807_section14842031151015"></a> 1425 1426Fills the area inside a closed path. 1427 1428- Parameter 1429 1430 N/A 1431 1432- Return Value 1433 1434 N/A 1435 1436- Example 1437 1438  1439 1440 ``` 1441 ctx.rect(20, 20, 100, 100); // Create a 100 x 100 rectangle at (20, 20). 1442 ctx.fill(); // Fill the rectangle using default settings. 1443 ``` 1444 1445 1446## clip\(\)<a name="en-us_topic_0000001058830807_section1355171921416"></a> 1447 1448Sets the current path to a clipping path. 1449 1450- Parameter 1451 1452 N/A 1453 1454- Return Value 1455 1456 N/A 1457 1458- Example 1459 1460  1461 1462 ``` 1463 ctx.rect(0, 0, 200, 200); 1464 ctx.stroke(); 1465 ctx.clip(); 1466 // Clip a rectangle and fill it with red paint. 1467 ctx.fillStyle = "rgb(255,0,0)"; 1468 ctx.fillRect(0, 0, 150, 150); 1469 ``` 1470 1471 1472## rotate\(\)<a name="en-us_topic_0000001058830807_section7682182091419"></a> 1473 1474Rotates a canvas clockwise around its coordinate axes. 1475 1476- Parameter 1477 1478 <a name="en-us_topic_0000001058830807_table1670853610595"></a> 1479 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row572823665918"><th class="cellrowborder" valign="top" width="17.22172217221722%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p57281836155917"><a name="en-us_topic_0000001058830807_p57281836155917"></a><a name="en-us_topic_0000001058830807_p57281836155917"></a>Name</p> 1480 </th> 1481 <th class="cellrowborder" valign="top" width="15.5015501550155%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p207281636145914"><a name="en-us_topic_0000001058830807_p207281636145914"></a><a name="en-us_topic_0000001058830807_p207281636145914"></a>Type</p> 1482 </th> 1483 <th class="cellrowborder" valign="top" width="67.27672767276727%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p1472873645916"><a name="en-us_topic_0000001058830807_p1472873645916"></a><a name="en-us_topic_0000001058830807_p1472873645916"></a>Description</p> 1484 </th> 1485 </tr> 1486 </thead> 1487 <tbody><tr id="en-us_topic_0000001058830807_row272813675911"><td class="cellrowborder" valign="top" width="17.22172217221722%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p7728113655914"><a name="en-us_topic_0000001058830807_p7728113655914"></a><a name="en-us_topic_0000001058830807_p7728113655914"></a>rotate</p> 1488 </td> 1489 <td class="cellrowborder" valign="top" width="15.5015501550155%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p1372863618596"><a name="en-us_topic_0000001058830807_p1372863618596"></a><a name="en-us_topic_0000001058830807_p1372863618596"></a>number</p> 1490 </td> 1491 <td class="cellrowborder" valign="top" width="67.27672767276727%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p47285363596"><a name="en-us_topic_0000001058830807_p47285363596"></a><a name="en-us_topic_0000001058830807_p47285363596"></a>Clockwise rotation angle. You can use <strong id="en-us_topic_0000001058830807_b2661315312"><a name="en-us_topic_0000001058830807_b2661315312"></a><a name="en-us_topic_0000001058830807_b2661315312"></a>Math.PI / 180</strong> to convert the angle to a radian.</p> 1492 </td> 1493 </tr> 1494 </tbody> 1495 </table> 1496 1497- Return Value 1498 1499 N/A 1500 1501- Example 1502 1503  1504 1505 ``` 1506 ctx.rotate(45 * Math.PI / 180); // Rotate the rectangle 45 degrees. 1507 ctx.fillRect(70, 20, 50, 50); 1508 ``` 1509 1510 1511## scale\(\)<a name="en-us_topic_0000001058830807_section157714218144"></a> 1512 1513Scales a canvas based on scaling factors. 1514 1515- Parameter 1516 1517 <a name="en-us_topic_0000001058830807_table23481973415"></a> 1518 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row9366771547"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p43665716410"><a name="en-us_topic_0000001058830807_p43665716410"></a><a name="en-us_topic_0000001058830807_p43665716410"></a>Name</p> 1519 </th> 1520 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p173667718418"><a name="en-us_topic_0000001058830807_p173667718418"></a><a name="en-us_topic_0000001058830807_p173667718418"></a>Type</p> 1521 </th> 1522 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p183661172419"><a name="en-us_topic_0000001058830807_p183661172419"></a><a name="en-us_topic_0000001058830807_p183661172419"></a>Description</p> 1523 </th> 1524 </tr> 1525 </thead> 1526 <tbody><tr id="en-us_topic_0000001058830807_row33666717414"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p113661711419"><a name="en-us_topic_0000001058830807_p113661711419"></a><a name="en-us_topic_0000001058830807_p113661711419"></a>x</p> 1527 </td> 1528 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p33671879413"><a name="en-us_topic_0000001058830807_p33671879413"></a><a name="en-us_topic_0000001058830807_p33671879413"></a>number</p> 1529 </td> 1530 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p5367870415"><a name="en-us_topic_0000001058830807_p5367870415"></a><a name="en-us_topic_0000001058830807_p5367870415"></a>Horizontal scale factor</p> 1531 </td> 1532 </tr> 1533 <tr id="en-us_topic_0000001058830807_row13367271645"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p1836717943"><a name="en-us_topic_0000001058830807_p1836717943"></a><a name="en-us_topic_0000001058830807_p1836717943"></a>y</p> 1534 </td> 1535 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p33671371347"><a name="en-us_topic_0000001058830807_p33671371347"></a><a name="en-us_topic_0000001058830807_p33671371347"></a>number</p> 1536 </td> 1537 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p203671878419"><a name="en-us_topic_0000001058830807_p203671878419"></a><a name="en-us_topic_0000001058830807_p203671878419"></a>Vertical scale factor</p> 1538 </td> 1539 </tr> 1540 </tbody> 1541 </table> 1542 1543- Return Value 1544 1545 N/A 1546 1547- Example 1548 1549  1550 1551 ``` 1552 ctx.strokeRect(10, 10, 25, 25); 1553 ctx.scale(2, 2);// Set a 200% scale factor for the rectangle. 1554 ctx.strokeRect(10, 10, 25, 25); 1555 ``` 1556 1557 1558## transform\(\)<a name="en-us_topic_0000001058830807_section1675964717570"></a> 1559 1560Defines a transformation matrix. To transform a graph, you only need to set parameters of the matrix. The coordinates of the graph are multiplied by the matrix values to obtain new coordinates of the transformed graph. You can use the matrix to implement multiple transform effects. 1561 1562> **NOTE:** 1563>The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation. 1564>- x' = scaleX \* x + skewY \* y + translateX 1565>- y' = skewX \* x + scaleY \* y + translateY 1566 1567- Parameter 1568 1569 <a name="en-us_topic_0000001058830807_table2760124718578"></a> 1570 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row676054716572"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p47602476571"><a name="en-us_topic_0000001058830807_p47602476571"></a><a name="en-us_topic_0000001058830807_p47602476571"></a>Name</p> 1571 </th> 1572 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p5760164710579"><a name="en-us_topic_0000001058830807_p5760164710579"></a><a name="en-us_topic_0000001058830807_p5760164710579"></a>Type</p> 1573 </th> 1574 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p97601147105711"><a name="en-us_topic_0000001058830807_p97601147105711"></a><a name="en-us_topic_0000001058830807_p97601147105711"></a>Description</p> 1575 </th> 1576 </tr> 1577 </thead> 1578 <tbody><tr id="en-us_topic_0000001058830807_row57601477578"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p197611471576"><a name="en-us_topic_0000001058830807_p197611471576"></a><a name="en-us_topic_0000001058830807_p197611471576"></a>scaleX</p> 1579 </td> 1580 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p1576144725710"><a name="en-us_topic_0000001058830807_p1576144725710"></a><a name="en-us_topic_0000001058830807_p1576144725710"></a>number</p> 1581 </td> 1582 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p17761647135713"><a name="en-us_topic_0000001058830807_p17761647135713"></a><a name="en-us_topic_0000001058830807_p17761647135713"></a>X-axis scale</p> 1583 </td> 1584 </tr> 1585 <tr id="en-us_topic_0000001058830807_row976184735711"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p1761947175714"><a name="en-us_topic_0000001058830807_p1761947175714"></a><a name="en-us_topic_0000001058830807_p1761947175714"></a>skewX</p> 1586 </td> 1587 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p177611647125715"><a name="en-us_topic_0000001058830807_p177611647125715"></a><a name="en-us_topic_0000001058830807_p177611647125715"></a>number</p> 1588 </td> 1589 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p876244725717"><a name="en-us_topic_0000001058830807_p876244725717"></a><a name="en-us_topic_0000001058830807_p876244725717"></a>X-axis skew</p> 1590 </td> 1591 </tr> 1592 <tr id="en-us_topic_0000001058830807_row5762847175716"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p1776215478578"><a name="en-us_topic_0000001058830807_p1776215478578"></a><a name="en-us_topic_0000001058830807_p1776215478578"></a>skewY</p> 1593 </td> 1594 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p2762154745716"><a name="en-us_topic_0000001058830807_p2762154745716"></a><a name="en-us_topic_0000001058830807_p2762154745716"></a>number</p> 1595 </td> 1596 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p13762164795712"><a name="en-us_topic_0000001058830807_p13762164795712"></a><a name="en-us_topic_0000001058830807_p13762164795712"></a>Y-axis skew</p> 1597 </td> 1598 </tr> 1599 <tr id="en-us_topic_0000001058830807_row876284716577"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p1076254775718"><a name="en-us_topic_0000001058830807_p1076254775718"></a><a name="en-us_topic_0000001058830807_p1076254775718"></a>scaleY</p> 1600 </td> 1601 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p276210474575"><a name="en-us_topic_0000001058830807_p276210474575"></a><a name="en-us_topic_0000001058830807_p276210474575"></a>number</p> 1602 </td> 1603 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p776234716577"><a name="en-us_topic_0000001058830807_p776234716577"></a><a name="en-us_topic_0000001058830807_p776234716577"></a>Y-axis scale</p> 1604 </td> 1605 </tr> 1606 <tr id="en-us_topic_0000001058830807_row07621847165720"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p6762154795717"><a name="en-us_topic_0000001058830807_p6762154795717"></a><a name="en-us_topic_0000001058830807_p6762154795717"></a>translateX</p> 1607 </td> 1608 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p376234720578"><a name="en-us_topic_0000001058830807_p376234720578"></a><a name="en-us_topic_0000001058830807_p376234720578"></a>number</p> 1609 </td> 1610 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p3763114705715"><a name="en-us_topic_0000001058830807_p3763114705715"></a><a name="en-us_topic_0000001058830807_p3763114705715"></a>X-axis translation</p> 1611 </td> 1612 </tr> 1613 <tr id="en-us_topic_0000001058830807_row8763104718572"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p97631647185712"><a name="en-us_topic_0000001058830807_p97631647185712"></a><a name="en-us_topic_0000001058830807_p97631647185712"></a>translateY</p> 1614 </td> 1615 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p18763194716579"><a name="en-us_topic_0000001058830807_p18763194716579"></a><a name="en-us_topic_0000001058830807_p18763194716579"></a>number</p> 1616 </td> 1617 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p15763847155713"><a name="en-us_topic_0000001058830807_p15763847155713"></a><a name="en-us_topic_0000001058830807_p15763847155713"></a>Y-axis translation</p> 1618 </td> 1619 </tr> 1620 </tbody> 1621 </table> 1622 1623- Return Value 1624 1625 N/A 1626 1627- Example 1628 1629  1630 1631 ``` 1632 ctx.fillStyle = 'rgb(0,0,0)'; 1633 ctx.fillRect(0, 0, 100, 100) 1634 ctx.transform(1, 0.5, -0.5, 1, 10, 10); 1635 ctx.fillStyle = 'rgb(255,0,0)'; 1636 ctx.fillRect(0, 0, 100, 100); 1637 ctx.transform(1, 0.5, -0.5, 1, 10, 10); 1638 ctx.fillStyle = 'rgb(0,0,255)'; 1639 ctx.fillRect(0, 0, 100, 100); 1640 ``` 1641 1642 1643## setTransform\(\)<a name="en-us_topic_0000001058830807_section1439382216440"></a> 1644 1645Resets the existing transformation matrix and creates a new transformation matrix by using the same parameters as the **transform\(\)** function. 1646 1647- Parameter 1648 1649 <a name="en-us_topic_0000001058830807_table13369145118412"></a> 1650 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row133954517420"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p1039545113413"><a name="en-us_topic_0000001058830807_p1039545113413"></a><a name="en-us_topic_0000001058830807_p1039545113413"></a>Name</p> 1651 </th> 1652 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p1439516511649"><a name="en-us_topic_0000001058830807_p1439516511649"></a><a name="en-us_topic_0000001058830807_p1439516511649"></a>Type</p> 1653 </th> 1654 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p1639517511547"><a name="en-us_topic_0000001058830807_p1639517511547"></a><a name="en-us_topic_0000001058830807_p1639517511547"></a>Description</p> 1655 </th> 1656 </tr> 1657 </thead> 1658 <tbody><tr id="en-us_topic_0000001058830807_row339510515415"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p43951951246"><a name="en-us_topic_0000001058830807_p43951951246"></a><a name="en-us_topic_0000001058830807_p43951951246"></a>scaleX</p> 1659 </td> 1660 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p93952511042"><a name="en-us_topic_0000001058830807_p93952511042"></a><a name="en-us_topic_0000001058830807_p93952511042"></a>number</p> 1661 </td> 1662 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p17552452132316"><a name="en-us_topic_0000001058830807_p17552452132316"></a><a name="en-us_topic_0000001058830807_p17552452132316"></a>X-axis scale</p> 1663 </td> 1664 </tr> 1665 <tr id="en-us_topic_0000001058830807_row63951511948"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p63957511243"><a name="en-us_topic_0000001058830807_p63957511243"></a><a name="en-us_topic_0000001058830807_p63957511243"></a>skewX</p> 1666 </td> 1667 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p93959515413"><a name="en-us_topic_0000001058830807_p93959515413"></a><a name="en-us_topic_0000001058830807_p93959515413"></a>number</p> 1668 </td> 1669 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p855205232313"><a name="en-us_topic_0000001058830807_p855205232313"></a><a name="en-us_topic_0000001058830807_p855205232313"></a>X-axis skew</p> 1670 </td> 1671 </tr> 1672 <tr id="en-us_topic_0000001058830807_row16395351149"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p12395751249"><a name="en-us_topic_0000001058830807_p12395751249"></a><a name="en-us_topic_0000001058830807_p12395751249"></a>skewY</p> 1673 </td> 1674 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p20396165115411"><a name="en-us_topic_0000001058830807_p20396165115411"></a><a name="en-us_topic_0000001058830807_p20396165115411"></a>number</p> 1675 </td> 1676 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p3552852152318"><a name="en-us_topic_0000001058830807_p3552852152318"></a><a name="en-us_topic_0000001058830807_p3552852152318"></a>Y-axis skew</p> 1677 </td> 1678 </tr> 1679 <tr id="en-us_topic_0000001058830807_row0396125117417"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p8396145114418"><a name="en-us_topic_0000001058830807_p8396145114418"></a><a name="en-us_topic_0000001058830807_p8396145114418"></a>scaleY</p> 1680 </td> 1681 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p1239605116410"><a name="en-us_topic_0000001058830807_p1239605116410"></a><a name="en-us_topic_0000001058830807_p1239605116410"></a>number</p> 1682 </td> 1683 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p6552205292319"><a name="en-us_topic_0000001058830807_p6552205292319"></a><a name="en-us_topic_0000001058830807_p6552205292319"></a>Y-axis scale</p> 1684 </td> 1685 </tr> 1686 <tr id="en-us_topic_0000001058830807_row71371555047"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p51681035892"><a name="en-us_topic_0000001058830807_p51681035892"></a><a name="en-us_topic_0000001058830807_p51681035892"></a>translateX</p> 1687 </td> 1688 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p816815351895"><a name="en-us_topic_0000001058830807_p816815351895"></a><a name="en-us_topic_0000001058830807_p816815351895"></a>number</p> 1689 </td> 1690 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p16552135220230"><a name="en-us_topic_0000001058830807_p16552135220230"></a><a name="en-us_topic_0000001058830807_p16552135220230"></a>X-axis translation</p> 1691 </td> 1692 </tr> 1693 <tr id="en-us_topic_0000001058830807_row23751855744"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p1216810351597"><a name="en-us_topic_0000001058830807_p1216810351597"></a><a name="en-us_topic_0000001058830807_p1216810351597"></a>translateY</p> 1694 </td> 1695 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p1916813355910"><a name="en-us_topic_0000001058830807_p1916813355910"></a><a name="en-us_topic_0000001058830807_p1916813355910"></a>number</p> 1696 </td> 1697 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p15553352102320"><a name="en-us_topic_0000001058830807_p15553352102320"></a><a name="en-us_topic_0000001058830807_p15553352102320"></a>Y-axis translation</p> 1698 </td> 1699 </tr> 1700 </tbody> 1701 </table> 1702 1703- Return Value 1704 1705 N/A 1706 1707- Example 1708 1709  1710 1711 ``` 1712 ctx.fillStyle = 'rgb(255,0,0)'; 1713 ctx.fillRect(0, 0, 100, 100) 1714 ctx.setTransform(1,0.5, -0.5, 1, 10, 10); 1715 ctx.fillStyle = 'rgb(0,0,255)'; 1716 ctx.fillRect(0, 0, 100, 100); 1717 ``` 1718 1719 1720## translate\(\)<a name="en-us_topic_0000001058830807_section931011253449"></a> 1721 1722Moves the origin of the coordinate system. 1723 1724- Parameter 1725 1726 <a name="en-us_topic_0000001058830807_table256392291115"></a> 1727 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row5585122161117"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p1458552217113"><a name="en-us_topic_0000001058830807_p1458552217113"></a><a name="en-us_topic_0000001058830807_p1458552217113"></a>Name</p> 1728 </th> 1729 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p17585112213118"><a name="en-us_topic_0000001058830807_p17585112213118"></a><a name="en-us_topic_0000001058830807_p17585112213118"></a>Type</p> 1730 </th> 1731 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p758592281116"><a name="en-us_topic_0000001058830807_p758592281116"></a><a name="en-us_topic_0000001058830807_p758592281116"></a>Description</p> 1732 </th> 1733 </tr> 1734 </thead> 1735 <tbody><tr id="en-us_topic_0000001058830807_row358510226116"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p4585162231115"><a name="en-us_topic_0000001058830807_p4585162231115"></a><a name="en-us_topic_0000001058830807_p4585162231115"></a>x</p> 1736 </td> 1737 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p13585152221111"><a name="en-us_topic_0000001058830807_p13585152221111"></a><a name="en-us_topic_0000001058830807_p13585152221111"></a>number</p> 1738 </td> 1739 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p11585102251118"><a name="en-us_topic_0000001058830807_p11585102251118"></a><a name="en-us_topic_0000001058830807_p11585102251118"></a>X-axis translation</p> 1740 </td> 1741 </tr> 1742 <tr id="en-us_topic_0000001058830807_row205858225118"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p1058532211120"><a name="en-us_topic_0000001058830807_p1058532211120"></a><a name="en-us_topic_0000001058830807_p1058532211120"></a>y</p> 1743 </td> 1744 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p1858582281116"><a name="en-us_topic_0000001058830807_p1858582281116"></a><a name="en-us_topic_0000001058830807_p1858582281116"></a>number</p> 1745 </td> 1746 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p1058572221115"><a name="en-us_topic_0000001058830807_p1058572221115"></a><a name="en-us_topic_0000001058830807_p1058572221115"></a>Y-axis translation</p> 1747 </td> 1748 </tr> 1749 </tbody> 1750 </table> 1751 1752- Return Value 1753 1754 N/A 1755 1756- Example 1757 1758  1759 1760 ``` 1761 ctx.fillRect(10, 10, 50, 50); 1762 ctx.translate(70, 70); 1763 ctx.fillRect(10, 10, 50, 50); 1764 ``` 1765 1766 1767## globalAlpha<a name="en-us_topic_0000001058830807_section188252174810"></a> 1768 1769Sets the alpha value. 1770 1771- Parameter 1772 1773 <a name="en-us_topic_0000001058830807_table93426123121"></a> 1774 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row123641312141218"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p15364121218129"><a name="en-us_topic_0000001058830807_p15364121218129"></a><a name="en-us_topic_0000001058830807_p15364121218129"></a>Name</p> 1775 </th> 1776 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p1136401214122"><a name="en-us_topic_0000001058830807_p1136401214122"></a><a name="en-us_topic_0000001058830807_p1136401214122"></a>Type</p> 1777 </th> 1778 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p19364121291215"><a name="en-us_topic_0000001058830807_p19364121291215"></a><a name="en-us_topic_0000001058830807_p19364121291215"></a>Description</p> 1779 </th> 1780 </tr> 1781 </thead> 1782 <tbody><tr id="en-us_topic_0000001058830807_row236412121129"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p43641512121219"><a name="en-us_topic_0000001058830807_p43641512121219"></a><a name="en-us_topic_0000001058830807_p43641512121219"></a>value</p> 1783 </td> 1784 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p236416122128"><a name="en-us_topic_0000001058830807_p236416122128"></a><a name="en-us_topic_0000001058830807_p236416122128"></a>number</p> 1785 </td> 1786 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p1254548152511"><a name="en-us_topic_0000001058830807_p1254548152511"></a><a name="en-us_topic_0000001058830807_p1254548152511"></a>Global alpha value to set. The value ranges from <strong id="en-us_topic_0000001058830807_b1799721125213"><a name="en-us_topic_0000001058830807_b1799721125213"></a><a name="en-us_topic_0000001058830807_b1799721125213"></a>0.0</strong> (completely transparent) to <strong id="en-us_topic_0000001058830807_b11116224105217"><a name="en-us_topic_0000001058830807_b11116224105217"></a><a name="en-us_topic_0000001058830807_b11116224105217"></a>1.0</strong> (completely opaque).</p> 1787 </td> 1788 </tr> 1789 </tbody> 1790 </table> 1791 1792- Return Value 1793 1794 N/A 1795 1796- Example 1797 1798  1799 1800 ``` 1801 ctx.fillStyle = 'rgb(255,0,0)'; 1802 ctx.fillRect(0, 0, 50, 50); 1803 ctx.globalAlpha = 0.4; 1804 ctx.fillStyle = 'rgb(0,0,255)'; 1805 ctx.fillRect(50, 50, 50, 50); 1806 ``` 1807 1808 1809## drawImage\(\)<a name="en-us_topic_0000001058830807_section1953117410488"></a> 1810 1811Draws an image. 1812 1813- Parameter 1814 1815 <a name="en-us_topic_0000001058830807_table32431032122019"></a> 1816 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row32931532152016"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p12931532192013"><a name="en-us_topic_0000001058830807_p12931532192013"></a><a name="en-us_topic_0000001058830807_p12931532192013"></a>Name</p> 1817 </th> 1818 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p18293153216204"><a name="en-us_topic_0000001058830807_p18293153216204"></a><a name="en-us_topic_0000001058830807_p18293153216204"></a>Type</p> 1819 </th> 1820 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p1529333214208"><a name="en-us_topic_0000001058830807_p1529333214208"></a><a name="en-us_topic_0000001058830807_p1529333214208"></a>Description</p> 1821 </th> 1822 </tr> 1823 </thead> 1824 <tbody><tr id="en-us_topic_0000001058830807_row14293732192019"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p32933328202"><a name="en-us_topic_0000001058830807_p32933328202"></a><a name="en-us_topic_0000001058830807_p32933328202"></a>image</p> 1825 </td> 1826 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p14293163232017"><a name="en-us_topic_0000001058830807_p14293163232017"></a><a name="en-us_topic_0000001058830807_p14293163232017"></a>Image</p> 1827 </td> 1828 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p8293193262017"><a name="en-us_topic_0000001058830807_p8293193262017"></a><a name="en-us_topic_0000001058830807_p8293193262017"></a>Image resource. For details, see <a href="image-0.md#EN-US_TOPIC_0000001115974752">Image</a>.</p> 1829 </td> 1830 </tr> 1831 <tr id="en-us_topic_0000001058830807_row3301829154419"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p183191137184416"><a name="en-us_topic_0000001058830807_p183191137184416"></a><a name="en-us_topic_0000001058830807_p183191137184416"></a>sx</p> 1832 </td> 1833 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p16319103734413"><a name="en-us_topic_0000001058830807_p16319103734413"></a><a name="en-us_topic_0000001058830807_p16319103734413"></a>number</p> 1834 </td> 1835 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p123191537154414"><a name="en-us_topic_0000001058830807_p123191537154414"></a><a name="en-us_topic_0000001058830807_p123191537154414"></a>X-coordinate of the upper left corner of the rectangle used to crop the source image.</p> 1836 </td> 1837 </tr> 1838 <tr id="en-us_topic_0000001058830807_row12670183194416"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p173195371449"><a name="en-us_topic_0000001058830807_p173195371449"></a><a name="en-us_topic_0000001058830807_p173195371449"></a>sy</p> 1839 </td> 1840 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p7319337144420"><a name="en-us_topic_0000001058830807_p7319337144420"></a><a name="en-us_topic_0000001058830807_p7319337144420"></a>number</p> 1841 </td> 1842 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p11320537124417"><a name="en-us_topic_0000001058830807_p11320537124417"></a><a name="en-us_topic_0000001058830807_p11320537124417"></a>Y-coordinate of the upper left corner of the rectangle used to crop the source image.</p> 1843 </td> 1844 </tr> 1845 <tr id="en-us_topic_0000001058830807_row106131433144418"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p18320037144416"><a name="en-us_topic_0000001058830807_p18320037144416"></a><a name="en-us_topic_0000001058830807_p18320037144416"></a>sWidth</p> 1846 </td> 1847 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p232016373443"><a name="en-us_topic_0000001058830807_p232016373443"></a><a name="en-us_topic_0000001058830807_p232016373443"></a>number</p> 1848 </td> 1849 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p2320173713449"><a name="en-us_topic_0000001058830807_p2320173713449"></a><a name="en-us_topic_0000001058830807_p2320173713449"></a>Target width to crop the source image.</p> 1850 </td> 1851 </tr> 1852 <tr id="en-us_topic_0000001058830807_row9578335104413"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p63201037144415"><a name="en-us_topic_0000001058830807_p63201037144415"></a><a name="en-us_topic_0000001058830807_p63201037144415"></a>sHeight</p> 1853 </td> 1854 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p1032043713440"><a name="en-us_topic_0000001058830807_p1032043713440"></a><a name="en-us_topic_0000001058830807_p1032043713440"></a>number</p> 1855 </td> 1856 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p143201937174418"><a name="en-us_topic_0000001058830807_p143201937174418"></a><a name="en-us_topic_0000001058830807_p143201937174418"></a>Target height to crop the source image.</p> 1857 </td> 1858 </tr> 1859 <tr id="en-us_topic_0000001058830807_row82931325201"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p142931032122010"><a name="en-us_topic_0000001058830807_p142931032122010"></a><a name="en-us_topic_0000001058830807_p142931032122010"></a>dx</p> 1860 </td> 1861 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p7293123218208"><a name="en-us_topic_0000001058830807_p7293123218208"></a><a name="en-us_topic_0000001058830807_p7293123218208"></a>number</p> 1862 </td> 1863 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p329363211208"><a name="en-us_topic_0000001058830807_p329363211208"></a><a name="en-us_topic_0000001058830807_p329363211208"></a>X-coordinate of the upper left corner of the drawing area on the canvas.</p> 1864 </td> 1865 </tr> 1866 <tr id="en-us_topic_0000001058830807_row1829323292013"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p112931232152014"><a name="en-us_topic_0000001058830807_p112931232152014"></a><a name="en-us_topic_0000001058830807_p112931232152014"></a>dy</p> 1867 </td> 1868 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p1829393215206"><a name="en-us_topic_0000001058830807_p1829393215206"></a><a name="en-us_topic_0000001058830807_p1829393215206"></a>number</p> 1869 </td> 1870 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p20293183219208"><a name="en-us_topic_0000001058830807_p20293183219208"></a><a name="en-us_topic_0000001058830807_p20293183219208"></a>Y-coordinate of the upper left corner of the drawing area on the canvas.</p> 1871 </td> 1872 </tr> 1873 <tr id="en-us_topic_0000001058830807_row1929303232015"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p12931632122013"><a name="en-us_topic_0000001058830807_p12931632122013"></a><a name="en-us_topic_0000001058830807_p12931632122013"></a>dWidth</p> 1874 </td> 1875 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p18293132102011"><a name="en-us_topic_0000001058830807_p18293132102011"></a><a name="en-us_topic_0000001058830807_p18293132102011"></a>number</p> 1876 </td> 1877 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p62937321203"><a name="en-us_topic_0000001058830807_p62937321203"></a><a name="en-us_topic_0000001058830807_p62937321203"></a>Width of the drawing area.</p> 1878 </td> 1879 </tr> 1880 <tr id="en-us_topic_0000001058830807_row15293163262011"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p029315329203"><a name="en-us_topic_0000001058830807_p029315329203"></a><a name="en-us_topic_0000001058830807_p029315329203"></a>dHeight</p> 1881 </td> 1882 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p72931432192011"><a name="en-us_topic_0000001058830807_p72931432192011"></a><a name="en-us_topic_0000001058830807_p72931432192011"></a>number</p> 1883 </td> 1884 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p2029363215202"><a name="en-us_topic_0000001058830807_p2029363215202"></a><a name="en-us_topic_0000001058830807_p2029363215202"></a>Height of the drawing area.</p> 1885 </td> 1886 </tr> 1887 </tbody> 1888 </table> 1889 1890- Return Value 1891 1892 N/A 1893 1894- Example 1895 1896  1897 1898 ``` 1899 var test = this.$element('drawImage'); 1900 var ctx = test.getContext('2d'); 1901 var img = new Image(); 1902 img.src = 'common/image/test.jpg'; 1903 ctx.drawImage(img, 50, 80, 80, 80); 1904 ``` 1905 1906 1907## restore\(\)<a name="en-us_topic_0000001058830807_section64027684817"></a> 1908 1909Restores the saved drawing context. 1910 1911- Parameter 1912 1913 N/A 1914 1915- Return Value 1916 1917 N/A 1918 1919- Example 1920 1921 ``` 1922 ctx.restore(); 1923 ``` 1924 1925 1926## save\(\)<a name="en-us_topic_0000001058830807_section410672635214"></a> 1927 1928Saves the current drawing context. 1929 1930- Parameter 1931 1932 N/A 1933 1934- Return Value 1935 1936 N/A 1937 1938- Example 1939 1940 ``` 1941 ctx.save(); 1942 ``` 1943 1944 1945## createLinearGradient\(\)<sup>6+</sup><a name="en-us_topic_0000001058830807_section1696310905"></a> 1946 1947Creates a linear gradient. A CanvasGradient object is returned. For details, see [CanvasGradient](canvasgradient.md#EN-US_TOPIC_0000001162494623). 1948 1949- Parameter 1950 1951 <a name="en-us_topic_0000001058830807_table1796312016012"></a> 1952 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row1096414014011"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p1596430101"><a name="en-us_topic_0000001058830807_p1596430101"></a><a name="en-us_topic_0000001058830807_p1596430101"></a>Name</p> 1953 </th> 1954 <th class="cellrowborder" valign="top" width="32.39393939393939%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p296410702"><a name="en-us_topic_0000001058830807_p296410702"></a><a name="en-us_topic_0000001058830807_p296410702"></a>Type</p> 1955 </th> 1956 <th class="cellrowborder" valign="top" width="34.27272727272727%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p1596412017016"><a name="en-us_topic_0000001058830807_p1596412017016"></a><a name="en-us_topic_0000001058830807_p1596412017016"></a>Description</p> 1957 </th> 1958 </tr> 1959 </thead> 1960 <tbody><tr id="en-us_topic_0000001058830807_row69641801501"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p59641405011"><a name="en-us_topic_0000001058830807_p59641405011"></a><a name="en-us_topic_0000001058830807_p59641405011"></a>x0</p> 1961 </td> 1962 <td class="cellrowborder" valign="top" width="32.39393939393939%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p7964602011"><a name="en-us_topic_0000001058830807_p7964602011"></a><a name="en-us_topic_0000001058830807_p7964602011"></a>number</p> 1963 </td> 1964 <td class="cellrowborder" valign="top" width="34.27272727272727%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p139648012011"><a name="en-us_topic_0000001058830807_p139648012011"></a><a name="en-us_topic_0000001058830807_p139648012011"></a>X coordinate of the start point</p> 1965 </td> 1966 </tr> 1967 <tr id="en-us_topic_0000001058830807_row13964130401"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p09641909020"><a name="en-us_topic_0000001058830807_p09641909020"></a><a name="en-us_topic_0000001058830807_p09641909020"></a>y0</p> 1968 </td> 1969 <td class="cellrowborder" valign="top" width="32.39393939393939%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p18965001203"><a name="en-us_topic_0000001058830807_p18965001203"></a><a name="en-us_topic_0000001058830807_p18965001203"></a>number</p> 1970 </td> 1971 <td class="cellrowborder" valign="top" width="34.27272727272727%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p19653020019"><a name="en-us_topic_0000001058830807_p19653020019"></a><a name="en-us_topic_0000001058830807_p19653020019"></a>Y coordinate of the start point</p> 1972 </td> 1973 </tr> 1974 <tr id="en-us_topic_0000001058830807_row19965104011"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p29653012013"><a name="en-us_topic_0000001058830807_p29653012013"></a><a name="en-us_topic_0000001058830807_p29653012013"></a>x1</p> 1975 </td> 1976 <td class="cellrowborder" valign="top" width="32.39393939393939%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p49653018012"><a name="en-us_topic_0000001058830807_p49653018012"></a><a name="en-us_topic_0000001058830807_p49653018012"></a>number</p> 1977 </td> 1978 <td class="cellrowborder" valign="top" width="34.27272727272727%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p19965704015"><a name="en-us_topic_0000001058830807_p19965704015"></a><a name="en-us_topic_0000001058830807_p19965704015"></a>X coordinate of the end point</p> 1979 </td> 1980 </tr> 1981 <tr id="en-us_topic_0000001058830807_row139652017014"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p496690407"><a name="en-us_topic_0000001058830807_p496690407"></a><a name="en-us_topic_0000001058830807_p496690407"></a>y1</p> 1982 </td> 1983 <td class="cellrowborder" valign="top" width="32.39393939393939%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p1296650207"><a name="en-us_topic_0000001058830807_p1296650207"></a><a name="en-us_topic_0000001058830807_p1296650207"></a>number</p> 1984 </td> 1985 <td class="cellrowborder" valign="top" width="34.27272727272727%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p69661401507"><a name="en-us_topic_0000001058830807_p69661401507"></a><a name="en-us_topic_0000001058830807_p69661401507"></a>Y coordinate of the end point</p> 1986 </td> 1987 </tr> 1988 </tbody> 1989 </table> 1990 1991- Return Value 1992 1993 <a name="en-us_topic_0000001058830807_table15966200609"></a> 1994 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row29668020014"><th class="cellrowborder" valign="top" width="19.77%" id="mcps1.1.3.1.1"><p id="en-us_topic_0000001058830807_p1696712015020"><a name="en-us_topic_0000001058830807_p1696712015020"></a><a name="en-us_topic_0000001058830807_p1696712015020"></a>Type</p> 1995 </th> 1996 <th class="cellrowborder" valign="top" width="80.23%" id="mcps1.1.3.1.2"><p id="en-us_topic_0000001058830807_p19671901603"><a name="en-us_topic_0000001058830807_p19671901603"></a><a name="en-us_topic_0000001058830807_p19671901603"></a>Description</p> 1997 </th> 1998 </tr> 1999 </thead> 2000 <tbody><tr id="en-us_topic_0000001058830807_row89671800010"><td class="cellrowborder" valign="top" width="19.77%" headers="mcps1.1.3.1.1 "><p id="en-us_topic_0000001058830807_p2967308018"><a name="en-us_topic_0000001058830807_p2967308018"></a><a name="en-us_topic_0000001058830807_p2967308018"></a>Object</p> 2001 </td> 2002 <td class="cellrowborder" valign="top" width="80.23%" headers="mcps1.1.3.1.2 "><p id="en-us_topic_0000001058830807_p1967801012"><a name="en-us_topic_0000001058830807_p1967801012"></a><a name="en-us_topic_0000001058830807_p1967801012"></a>Returns the created <strong id="en-us_topic_0000001058830807_b3209150103713"><a name="en-us_topic_0000001058830807_b3209150103713"></a><a name="en-us_topic_0000001058830807_b3209150103713"></a>CanvasGradient</strong> object.</p> 2003 </td> 2004 </tr> 2005 </tbody> 2006 </table> 2007 2008- Example 2009 2010  2011 2012 ``` 2013 <!-- xxx.hml --> 2014 <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas> 2015 <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" /> 2016 ``` 2017 2018 ``` 2019 // xxx.js 2020 export default { 2021 handleClick() { 2022 const el = this.$refs.canvas; 2023 const ctx = el.getContext('2d'); 2024 // Linear gradient: start(50,0) end(300,100) 2025 var gradient = ctx.createLinearGradient(50,0, 300,100); 2026 // Add three color stops 2027 gradient.addColorStop(0.0, 'red'); 2028 gradient.addColorStop(0.5, 'white'); 2029 gradient.addColorStop(1.0, 'green'); 2030 // Set the fill style and draw a rectangle 2031 ctx.fillStyle = gradient; 2032 ctx.fillRect(0, 0, 500, 500); 2033 } 2034 } 2035 ``` 2036 2037 2038## createImageData\(\)<a name="en-us_topic_0000001058830807_section2021142714524"></a> 2039 2040Creates an **ImageData** object. For details, see [ImageData](imagedata.md#EN-US_TOPIC_0000001115814838). 2041 2042- Parameter 2043 2044 <a name="en-us_topic_0000001058830807_table129117962316"></a> 2045 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row19361699239"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p1293615917238"><a name="en-us_topic_0000001058830807_p1293615917238"></a><a name="en-us_topic_0000001058830807_p1293615917238"></a>Name</p> 2046 </th> 2047 <th class="cellrowborder" valign="top" width="32.39393939393939%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p1693612912237"><a name="en-us_topic_0000001058830807_p1693612912237"></a><a name="en-us_topic_0000001058830807_p1693612912237"></a>Type</p> 2048 </th> 2049 <th class="cellrowborder" valign="top" width="34.27272727272727%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p13936189122313"><a name="en-us_topic_0000001058830807_p13936189122313"></a><a name="en-us_topic_0000001058830807_p13936189122313"></a>Description</p> 2050 </th> 2051 </tr> 2052 </thead> 2053 <tbody><tr id="en-us_topic_0000001058830807_row59364982313"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p19364919234"><a name="en-us_topic_0000001058830807_p19364919234"></a><a name="en-us_topic_0000001058830807_p19364919234"></a>width</p> 2054 </td> 2055 <td class="cellrowborder" valign="top" width="32.39393939393939%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p69368972314"><a name="en-us_topic_0000001058830807_p69368972314"></a><a name="en-us_topic_0000001058830807_p69368972314"></a>number</p> 2056 </td> 2057 <td class="cellrowborder" valign="top" width="34.27272727272727%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p10936179162310"><a name="en-us_topic_0000001058830807_p10936179162310"></a><a name="en-us_topic_0000001058830807_p10936179162310"></a>Width of the <strong id="en-us_topic_0000001058830807_b177721364815"><a name="en-us_topic_0000001058830807_b177721364815"></a><a name="en-us_topic_0000001058830807_b177721364815"></a>ImageData</strong> object</p> 2058 </td> 2059 </tr> 2060 <tr id="en-us_topic_0000001058830807_row593620917239"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p129361199237"><a name="en-us_topic_0000001058830807_p129361199237"></a><a name="en-us_topic_0000001058830807_p129361199237"></a>height</p> 2061 </td> 2062 <td class="cellrowborder" valign="top" width="32.39393939393939%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p793613982319"><a name="en-us_topic_0000001058830807_p793613982319"></a><a name="en-us_topic_0000001058830807_p793613982319"></a>number</p> 2063 </td> 2064 <td class="cellrowborder" valign="top" width="34.27272727272727%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p139365917231"><a name="en-us_topic_0000001058830807_p139365917231"></a><a name="en-us_topic_0000001058830807_p139365917231"></a>Height of the <strong id="en-us_topic_0000001058830807_b143111032174810"><a name="en-us_topic_0000001058830807_b143111032174810"></a><a name="en-us_topic_0000001058830807_b143111032174810"></a>ImageData</strong> object</p> 2065 </td> 2066 </tr> 2067 <tr id="en-us_topic_0000001058830807_row109361902317"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p1093620932310"><a name="en-us_topic_0000001058830807_p1093620932310"></a><a name="en-us_topic_0000001058830807_p1093620932310"></a>imagedata</p> 2068 </td> 2069 <td class="cellrowborder" valign="top" width="32.39393939393939%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p119372911232"><a name="en-us_topic_0000001058830807_p119372911232"></a><a name="en-us_topic_0000001058830807_p119372911232"></a>Object</p> 2070 </td> 2071 <td class="cellrowborder" valign="top" width="34.27272727272727%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p109371902312"><a name="en-us_topic_0000001058830807_p109371902312"></a><a name="en-us_topic_0000001058830807_p109371902312"></a><strong id="en-us_topic_0000001058830807_b5491833164819"><a name="en-us_topic_0000001058830807_b5491833164819"></a><a name="en-us_topic_0000001058830807_b5491833164819"></a>ImageData</strong> object with the same width and height copied from the original <strong id="en-us_topic_0000001058830807_b16501733184812"><a name="en-us_topic_0000001058830807_b16501733184812"></a><a name="en-us_topic_0000001058830807_b16501733184812"></a>ImageData</strong> object</p> 2072 </td> 2073 </tr> 2074 </tbody> 2075 </table> 2076 2077- Return Value 2078 2079 <a name="en-us_topic_0000001058830807_table17718181510238"></a> 2080 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row17736101592319"><th class="cellrowborder" valign="top" width="19.77%" id="mcps1.1.3.1.1"><p id="en-us_topic_0000001058830807_p7736415102313"><a name="en-us_topic_0000001058830807_p7736415102313"></a><a name="en-us_topic_0000001058830807_p7736415102313"></a>Type</p> 2081 </th> 2082 <th class="cellrowborder" valign="top" width="80.23%" id="mcps1.1.3.1.2"><p id="en-us_topic_0000001058830807_p1873610154234"><a name="en-us_topic_0000001058830807_p1873610154234"></a><a name="en-us_topic_0000001058830807_p1873610154234"></a>Description</p> 2083 </th> 2084 </tr> 2085 </thead> 2086 <tbody><tr id="en-us_topic_0000001058830807_row1673601532316"><td class="cellrowborder" valign="top" width="19.77%" headers="mcps1.1.3.1.1 "><p id="en-us_topic_0000001058830807_p10736191518237"><a name="en-us_topic_0000001058830807_p10736191518237"></a><a name="en-us_topic_0000001058830807_p10736191518237"></a>Object</p> 2087 </td> 2088 <td class="cellrowborder" valign="top" width="80.23%" headers="mcps1.1.3.1.2 "><p id="en-us_topic_0000001058830807_p7736315122311"><a name="en-us_topic_0000001058830807_p7736315122311"></a><a name="en-us_topic_0000001058830807_p7736315122311"></a>Returns the newly created <strong id="en-us_topic_0000001058830807_b4820103311484"><a name="en-us_topic_0000001058830807_b4820103311484"></a><a name="en-us_topic_0000001058830807_b4820103311484"></a>ImageData</strong> object.</p> 2089 </td> 2090 </tr> 2091 </tbody> 2092 </table> 2093 2094- Example 2095 2096 ``` 2097 imageData = ctx.createImageData(50, 100); // Create ImageData with 50px width and 100px height 2098 newImageData = ctx.createImageData(imageData); // Create ImageData using the input imageData 2099 ``` 2100 2101 2102## getImageData\(\)<a name="en-us_topic_0000001058830807_section92731528205217"></a> 2103 2104**ImageData** object created with pixels in the specified area on the canvas. 2105 2106- Parameter 2107 2108 <a name="en-us_topic_0000001058830807_table290615162313"></a> 2109 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row18931185132316"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p189319518233"><a name="en-us_topic_0000001058830807_p189319518233"></a><a name="en-us_topic_0000001058830807_p189319518233"></a>Name</p> 2110 </th> 2111 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p99311751122319"><a name="en-us_topic_0000001058830807_p99311751122319"></a><a name="en-us_topic_0000001058830807_p99311751122319"></a>Type</p> 2112 </th> 2113 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p59312514236"><a name="en-us_topic_0000001058830807_p59312514236"></a><a name="en-us_topic_0000001058830807_p59312514236"></a>Description</p> 2114 </th> 2115 </tr> 2116 </thead> 2117 <tbody><tr id="en-us_topic_0000001058830807_row5931175152317"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p1393165162311"><a name="en-us_topic_0000001058830807_p1393165162311"></a><a name="en-us_topic_0000001058830807_p1393165162311"></a>sx</p> 2118 </td> 2119 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p1193118517235"><a name="en-us_topic_0000001058830807_p1193118517235"></a><a name="en-us_topic_0000001058830807_p1193118517235"></a>number</p> 2120 </td> 2121 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p9931195122316"><a name="en-us_topic_0000001058830807_p9931195122316"></a><a name="en-us_topic_0000001058830807_p9931195122316"></a>X-coordinate of the upper left corner of the output area</p> 2122 </td> 2123 </tr> 2124 <tr id="en-us_topic_0000001058830807_row119316511234"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p12931155142311"><a name="en-us_topic_0000001058830807_p12931155142311"></a><a name="en-us_topic_0000001058830807_p12931155142311"></a>sy</p> 2125 </td> 2126 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p10931145112232"><a name="en-us_topic_0000001058830807_p10931145112232"></a><a name="en-us_topic_0000001058830807_p10931145112232"></a>number</p> 2127 </td> 2128 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p1393125112230"><a name="en-us_topic_0000001058830807_p1393125112230"></a><a name="en-us_topic_0000001058830807_p1393125112230"></a>Y-coordinate of the upper left corner of the output area</p> 2129 </td> 2130 </tr> 2131 <tr id="en-us_topic_0000001058830807_row11931951142315"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p59311051112311"><a name="en-us_topic_0000001058830807_p59311051112311"></a><a name="en-us_topic_0000001058830807_p59311051112311"></a>sw</p> 2132 </td> 2133 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p12931351162314"><a name="en-us_topic_0000001058830807_p12931351162314"></a><a name="en-us_topic_0000001058830807_p12931351162314"></a>number</p> 2134 </td> 2135 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p16932165172315"><a name="en-us_topic_0000001058830807_p16932165172315"></a><a name="en-us_topic_0000001058830807_p16932165172315"></a>Width of the output area</p> 2136 </td> 2137 </tr> 2138 <tr id="en-us_topic_0000001058830807_row593215132316"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p199321451132315"><a name="en-us_topic_0000001058830807_p199321451132315"></a><a name="en-us_topic_0000001058830807_p199321451132315"></a>sh</p> 2139 </td> 2140 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p89321851182311"><a name="en-us_topic_0000001058830807_p89321851182311"></a><a name="en-us_topic_0000001058830807_p89321851182311"></a>number</p> 2141 </td> 2142 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p10932105102314"><a name="en-us_topic_0000001058830807_p10932105102314"></a><a name="en-us_topic_0000001058830807_p10932105102314"></a>Height of the output area</p> 2143 </td> 2144 </tr> 2145 </tbody> 2146 </table> 2147 2148- Return Value 2149 2150 <a name="en-us_topic_0000001058830807_table062115912238"></a> 2151 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row1264005902317"><th class="cellrowborder" valign="top" width="19.77%" id="mcps1.1.3.1.1"><p id="en-us_topic_0000001058830807_p0640195910233"><a name="en-us_topic_0000001058830807_p0640195910233"></a><a name="en-us_topic_0000001058830807_p0640195910233"></a>Type</p> 2152 </th> 2153 <th class="cellrowborder" valign="top" width="80.23%" id="mcps1.1.3.1.2"><p id="en-us_topic_0000001058830807_p4640155922319"><a name="en-us_topic_0000001058830807_p4640155922319"></a><a name="en-us_topic_0000001058830807_p4640155922319"></a>Description</p> 2154 </th> 2155 </tr> 2156 </thead> 2157 <tbody><tr id="en-us_topic_0000001058830807_row15640359162318"><td class="cellrowborder" valign="top" width="19.77%" headers="mcps1.1.3.1.1 "><p id="en-us_topic_0000001058830807_p964035912238"><a name="en-us_topic_0000001058830807_p964035912238"></a><a name="en-us_topic_0000001058830807_p964035912238"></a>Object</p> 2158 </td> 2159 <td class="cellrowborder" valign="top" width="80.23%" headers="mcps1.1.3.1.2 "><p id="en-us_topic_0000001058830807_p464055982312"><a name="en-us_topic_0000001058830807_p464055982312"></a><a name="en-us_topic_0000001058830807_p464055982312"></a><strong id="en-us_topic_0000001058830807_b12271164185414"><a name="en-us_topic_0000001058830807_b12271164185414"></a><a name="en-us_topic_0000001058830807_b12271164185414"></a>ImageData</strong> object that contains pixels in the specified area on the canvas</p> 2160 </td> 2161 </tr> 2162 </tbody> 2163 </table> 2164 2165- Example 2166 2167 ``` 2168 var test = this.$element('getImageData'); 2169 var ctx = test.getContext('2d'); 2170 var imageData = ctx.getImageData(0, 0, 280, 300); 2171 ``` 2172 2173 2174## putImageData\(\)<a name="en-us_topic_0000001058830807_section15774154925515"></a> 2175 2176Puts the **ImageData** onto a rectangular area on the canvas. 2177 2178- Parameter 2179 2180 <a name="en-us_topic_0000001058830807_table1915122872412"></a> 2181 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row1619052872418"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p3190122872418"><a name="en-us_topic_0000001058830807_p3190122872418"></a><a name="en-us_topic_0000001058830807_p3190122872418"></a>Name</p> 2182 </th> 2183 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p5190528172413"><a name="en-us_topic_0000001058830807_p5190528172413"></a><a name="en-us_topic_0000001058830807_p5190528172413"></a>Type</p> 2184 </th> 2185 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p2019072814241"><a name="en-us_topic_0000001058830807_p2019072814241"></a><a name="en-us_topic_0000001058830807_p2019072814241"></a>Description</p> 2186 </th> 2187 </tr> 2188 </thead> 2189 <tbody><tr id="en-us_topic_0000001058830807_row1819032813242"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p1819052882414"><a name="en-us_topic_0000001058830807_p1819052882414"></a><a name="en-us_topic_0000001058830807_p1819052882414"></a>imagedata</p> 2190 </td> 2191 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p16190112815243"><a name="en-us_topic_0000001058830807_p16190112815243"></a><a name="en-us_topic_0000001058830807_p16190112815243"></a>Object</p> 2192 </td> 2193 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p1190102816243"><a name="en-us_topic_0000001058830807_p1190102816243"></a><a name="en-us_topic_0000001058830807_p1190102816243"></a><strong id="en-us_topic_0000001058830807_b986064519565"><a name="en-us_topic_0000001058830807_b986064519565"></a><a name="en-us_topic_0000001058830807_b986064519565"></a>ImageData</strong> object with pixels to put onto the canvas</p> 2194 </td> 2195 </tr> 2196 <tr id="en-us_topic_0000001058830807_row1219012882416"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p51901828112411"><a name="en-us_topic_0000001058830807_p51901828112411"></a><a name="en-us_topic_0000001058830807_p51901828112411"></a>dx</p> 2197 </td> 2198 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p14190202892413"><a name="en-us_topic_0000001058830807_p14190202892413"></a><a name="en-us_topic_0000001058830807_p14190202892413"></a>number</p> 2199 </td> 2200 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p171911828202414"><a name="en-us_topic_0000001058830807_p171911828202414"></a><a name="en-us_topic_0000001058830807_p171911828202414"></a>X-axis offset of the rectangular area on the canvas</p> 2201 </td> 2202 </tr> 2203 <tr id="en-us_topic_0000001058830807_row12191102872416"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p0191122802417"><a name="en-us_topic_0000001058830807_p0191122802417"></a><a name="en-us_topic_0000001058830807_p0191122802417"></a>dy</p> 2204 </td> 2205 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p519118288246"><a name="en-us_topic_0000001058830807_p519118288246"></a><a name="en-us_topic_0000001058830807_p519118288246"></a>number</p> 2206 </td> 2207 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p7191328102418"><a name="en-us_topic_0000001058830807_p7191328102418"></a><a name="en-us_topic_0000001058830807_p7191328102418"></a>Y-axis offset of the rectangular area on the canvas</p> 2208 </td> 2209 </tr> 2210 <tr id="en-us_topic_0000001058830807_row1319120283245"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p419112283249"><a name="en-us_topic_0000001058830807_p419112283249"></a><a name="en-us_topic_0000001058830807_p419112283249"></a>dirtyX</p> 2211 </td> 2212 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p1419117288248"><a name="en-us_topic_0000001058830807_p1419117288248"></a><a name="en-us_topic_0000001058830807_p1419117288248"></a>number</p> 2213 </td> 2214 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p8191128172412"><a name="en-us_topic_0000001058830807_p8191128172412"></a><a name="en-us_topic_0000001058830807_p8191128172412"></a>X-axis offset of the upper left corner of the rectangular area relative to that of the source image</p> 2215 </td> 2216 </tr> 2217 <tr id="en-us_topic_0000001058830807_row14191128142419"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p131911528162418"><a name="en-us_topic_0000001058830807_p131911528162418"></a><a name="en-us_topic_0000001058830807_p131911528162418"></a>dirtyY</p> 2218 </td> 2219 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p1919119281244"><a name="en-us_topic_0000001058830807_p1919119281244"></a><a name="en-us_topic_0000001058830807_p1919119281244"></a>number</p> 2220 </td> 2221 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p11191728132414"><a name="en-us_topic_0000001058830807_p11191728132414"></a><a name="en-us_topic_0000001058830807_p11191728132414"></a>Y-axis offset of the upper left corner of the rectangular area relative to that of the source image</p> 2222 </td> 2223 </tr> 2224 <tr id="en-us_topic_0000001058830807_row14191182813241"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p191911728162419"><a name="en-us_topic_0000001058830807_p191911728162419"></a><a name="en-us_topic_0000001058830807_p191911728162419"></a>dirtyWidth</p> 2225 </td> 2226 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p3191162815245"><a name="en-us_topic_0000001058830807_p3191162815245"></a><a name="en-us_topic_0000001058830807_p3191162815245"></a>number</p> 2227 </td> 2228 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p119162813242"><a name="en-us_topic_0000001058830807_p119162813242"></a><a name="en-us_topic_0000001058830807_p119162813242"></a>Width of the rectangular area to crop the source image</p> 2229 </td> 2230 </tr> 2231 <tr id="en-us_topic_0000001058830807_row519113281242"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p19191122832420"><a name="en-us_topic_0000001058830807_p19191122832420"></a><a name="en-us_topic_0000001058830807_p19191122832420"></a>dirtyHeight</p> 2232 </td> 2233 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p31910280243"><a name="en-us_topic_0000001058830807_p31910280243"></a><a name="en-us_topic_0000001058830807_p31910280243"></a>number</p> 2234 </td> 2235 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p10191172842415"><a name="en-us_topic_0000001058830807_p10191172842415"></a><a name="en-us_topic_0000001058830807_p10191172842415"></a>Height of the rectangular area to crop the source image</p> 2236 </td> 2237 </tr> 2238 </tbody> 2239 </table> 2240 2241- Return Value 2242 2243 N/A 2244 2245- Example 2246 2247 ``` 2248 var test = this.$element('putImageData'); 2249 var ctx = test.getContext('2d'); 2250 var imgData = ctx.createImageData(100, 100); 2251 for (var i = 0; i < imgData.data.length; i += 4) { 2252 imgData.data[i + 0] = 255; 2253 imgData.data[i + 1] = 0; 2254 imgData.data[i + 2] = 0; 2255 imgData.data[i + 3] = 255; 2256 } 2257 ctx.putImageData(imgData, 10, 10); 2258 ``` 2259 2260 2261## setLineDash\(\)<a name="en-us_topic_0000001058830807_section1934985155516"></a> 2262 2263Sets the dash line style. 2264 2265- Parameter 2266 2267 <a name="en-us_topic_0000001058830807_table7928161714252"></a> 2268 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row2946131732512"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p12946171742513"><a name="en-us_topic_0000001058830807_p12946171742513"></a><a name="en-us_topic_0000001058830807_p12946171742513"></a>Name</p> 2269 </th> 2270 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p9946517172511"><a name="en-us_topic_0000001058830807_p9946517172511"></a><a name="en-us_topic_0000001058830807_p9946517172511"></a>Type</p> 2271 </th> 2272 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p0946121762513"><a name="en-us_topic_0000001058830807_p0946121762513"></a><a name="en-us_topic_0000001058830807_p0946121762513"></a>Description</p> 2273 </th> 2274 </tr> 2275 </thead> 2276 <tbody><tr id="en-us_topic_0000001058830807_row1694611713251"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p1494621722516"><a name="en-us_topic_0000001058830807_p1494621722516"></a><a name="en-us_topic_0000001058830807_p1494621722516"></a>segments</p> 2277 </td> 2278 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p139471217152513"><a name="en-us_topic_0000001058830807_p139471217152513"></a><a name="en-us_topic_0000001058830807_p139471217152513"></a>Array</p> 2279 </td> 2280 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p10947141782515"><a name="en-us_topic_0000001058830807_p10947141782515"></a><a name="en-us_topic_0000001058830807_p10947141782515"></a>An array describing the interval of alternate line segments and length of spacing</p> 2281 </td> 2282 </tr> 2283 </tbody> 2284 </table> 2285 2286- Return Value 2287 2288 N/A 2289 2290- Example 2291 2292 ``` 2293 ctx.setLineDash([10,20]); 2294 ``` 2295 2296 2297## getLineDash\(\)<a name="en-us_topic_0000001058830807_section522105285519"></a> 2298 2299Obtains the dash line style. 2300 2301- Parameter 2302 2303 N/A 2304 2305- Return Value 2306 2307 <a name="en-us_topic_0000001058830807_table7827188122614"></a> 2308 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row58489882610"><th class="cellrowborder" valign="top" width="19.77%" id="mcps1.1.3.1.1"><p id="en-us_topic_0000001058830807_p084898122610"><a name="en-us_topic_0000001058830807_p084898122610"></a><a name="en-us_topic_0000001058830807_p084898122610"></a>Type</p> 2309 </th> 2310 <th class="cellrowborder" valign="top" width="80.23%" id="mcps1.1.3.1.2"><p id="en-us_topic_0000001058830807_p58488817262"><a name="en-us_topic_0000001058830807_p58488817262"></a><a name="en-us_topic_0000001058830807_p58488817262"></a>Description</p> 2311 </th> 2312 </tr> 2313 </thead> 2314 <tbody><tr id="en-us_topic_0000001058830807_row138486802613"><td class="cellrowborder" valign="top" width="19.77%" headers="mcps1.1.3.1.1 "><p id="en-us_topic_0000001058830807_p38481582261"><a name="en-us_topic_0000001058830807_p38481582261"></a><a name="en-us_topic_0000001058830807_p38481582261"></a>Array</p> 2315 </td> 2316 <td class="cellrowborder" valign="top" width="80.23%" headers="mcps1.1.3.1.2 "><p id="en-us_topic_0000001058830807_p784813811263"><a name="en-us_topic_0000001058830807_p784813811263"></a><a name="en-us_topic_0000001058830807_p784813811263"></a>Interval of alternate line segments and the length of spacing</p> 2317 </td> 2318 </tr> 2319 </tbody> 2320 </table> 2321 2322- Example 2323 2324 ``` 2325 var info = ctx.getLineDash(); 2326 ``` 2327 2328 2329## lineDashOffset<a name="en-us_topic_0000001058830807_section8283548889"></a> 2330 2331Sets the dash line offset. 2332 2333- Parameter 2334 2335 <a name="en-us_topic_0000001058830807_table661840172615"></a> 2336 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row147974012263"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p137944010269"><a name="en-us_topic_0000001058830807_p137944010269"></a><a name="en-us_topic_0000001058830807_p137944010269"></a>Name</p> 2337 </th> 2338 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p879340142613"><a name="en-us_topic_0000001058830807_p879340142613"></a><a name="en-us_topic_0000001058830807_p879340142613"></a>Type</p> 2339 </th> 2340 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p167912409261"><a name="en-us_topic_0000001058830807_p167912409261"></a><a name="en-us_topic_0000001058830807_p167912409261"></a>Description</p> 2341 </th> 2342 </tr> 2343 </thead> 2344 <tbody><tr id="en-us_topic_0000001058830807_row1793401268"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p679940122610"><a name="en-us_topic_0000001058830807_p679940122610"></a><a name="en-us_topic_0000001058830807_p679940122610"></a>value</p> 2345 </td> 2346 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p16801740132611"><a name="en-us_topic_0000001058830807_p16801740132611"></a><a name="en-us_topic_0000001058830807_p16801740132611"></a>number</p> 2347 </td> 2348 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p980174016264"><a name="en-us_topic_0000001058830807_p980174016264"></a><a name="en-us_topic_0000001058830807_p980174016264"></a>Dash line offset. The value is a floating point number starting from <strong id="en-us_topic_0000001058830807_b19251924161013"><a name="en-us_topic_0000001058830807_b19251924161013"></a><a name="en-us_topic_0000001058830807_b19251924161013"></a>0.0</strong>.</p> 2349 </td> 2350 </tr> 2351 </tbody> 2352 </table> 2353 2354- Return Value 2355 2356 N/A 2357 2358- Example 2359 2360 ``` 2361 ctx.lineDashOffset = 1.0; 2362 ``` 2363 2364 2365## globalCompositeOperation<a name="en-us_topic_0000001058830807_section123871750284"></a> 2366 2367Sets the composite operation type. 2368 2369- Parameter 2370 2371 <a name="en-us_topic_0000001058830807_table894332519273"></a> 2372 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row1961162592715"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p7961132562710"><a name="en-us_topic_0000001058830807_p7961132562710"></a><a name="en-us_topic_0000001058830807_p7961132562710"></a>Name</p> 2373 </th> 2374 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p18961025162717"><a name="en-us_topic_0000001058830807_p18961025162717"></a><a name="en-us_topic_0000001058830807_p18961025162717"></a>Type</p> 2375 </th> 2376 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p3961192502717"><a name="en-us_topic_0000001058830807_p3961192502717"></a><a name="en-us_topic_0000001058830807_p3961192502717"></a>Description</p> 2377 </th> 2378 </tr> 2379 </thead> 2380 <tbody><tr id="en-us_topic_0000001058830807_row10961162532713"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p1896112258278"><a name="en-us_topic_0000001058830807_p1896112258278"></a><a name="en-us_topic_0000001058830807_p1896112258278"></a>type</p> 2381 </td> 2382 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p8961142512276"><a name="en-us_topic_0000001058830807_p8961142512276"></a><a name="en-us_topic_0000001058830807_p8961142512276"></a>string</p> 2383 </td> 2384 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p1796132510275"><a name="en-us_topic_0000001058830807_p1796132510275"></a><a name="en-us_topic_0000001058830807_p1796132510275"></a>Type of the composite operation. Available values are as follows: <strong id="en-us_topic_0000001058830807_b1716717182516"><a name="en-us_topic_0000001058830807_b1716717182516"></a><a name="en-us_topic_0000001058830807_b1716717182516"></a>source-over</strong> (default value), <strong id="en-us_topic_0000001058830807_b1896152035112"><a name="en-us_topic_0000001058830807_b1896152035112"></a><a name="en-us_topic_0000001058830807_b1896152035112"></a>source-atop</strong>, <strong id="en-us_topic_0000001058830807_b20142475114"><a name="en-us_topic_0000001058830807_b20142475114"></a><a name="en-us_topic_0000001058830807_b20142475114"></a>source-in</strong>, <strong id="en-us_topic_0000001058830807_b17813132614511"><a name="en-us_topic_0000001058830807_b17813132614511"></a><a name="en-us_topic_0000001058830807_b17813132614511"></a>source-out</strong>, <strong id="en-us_topic_0000001058830807_b10841112915117"><a name="en-us_topic_0000001058830807_b10841112915117"></a><a name="en-us_topic_0000001058830807_b10841112915117"></a>destination-over</strong>, <strong id="en-us_topic_0000001058830807_b17121833205119"><a name="en-us_topic_0000001058830807_b17121833205119"></a><a name="en-us_topic_0000001058830807_b17121833205119"></a>destination-atop</strong>, <strong id="en-us_topic_0000001058830807_b2373136145114"><a name="en-us_topic_0000001058830807_b2373136145114"></a><a name="en-us_topic_0000001058830807_b2373136145114"></a>destination-in</strong>, <strong id="en-us_topic_0000001058830807_b135215410515"><a name="en-us_topic_0000001058830807_b135215410515"></a><a name="en-us_topic_0000001058830807_b135215410515"></a>destination-out</strong>, <strong id="en-us_topic_0000001058830807_b17972204218515"><a name="en-us_topic_0000001058830807_b17972204218515"></a><a name="en-us_topic_0000001058830807_b17972204218515"></a>lighter</strong>, <strong id="en-us_topic_0000001058830807_b11713174412511"><a name="en-us_topic_0000001058830807_b11713174412511"></a><a name="en-us_topic_0000001058830807_b11713174412511"></a>copy</strong>, and <strong id="en-us_topic_0000001058830807_b1124234615111"><a name="en-us_topic_0000001058830807_b1124234615111"></a><a name="en-us_topic_0000001058830807_b1124234615111"></a>xor</strong>.</p> 2385 </td> 2386 </tr> 2387 </tbody> 2388 </table> 2389 2390 Attribute 2391 2392 <a name="en-us_topic_0000001058830807_table16858736162715"></a> 2393 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row1789616363276"><th class="cellrowborder" valign="top" width="12.78%" id="mcps1.1.3.1.1"><p id="en-us_topic_0000001058830807_p3896113612272"><a name="en-us_topic_0000001058830807_p3896113612272"></a><a name="en-us_topic_0000001058830807_p3896113612272"></a>Value</p> 2394 </th> 2395 <th class="cellrowborder" valign="top" width="87.22%" id="mcps1.1.3.1.2"><p id="en-us_topic_0000001058830807_p1389653616271"><a name="en-us_topic_0000001058830807_p1389653616271"></a><a name="en-us_topic_0000001058830807_p1389653616271"></a>Description</p> 2396 </th> 2397 </tr> 2398 </thead> 2399 <tbody><tr id="en-us_topic_0000001058830807_row5896163615275"><td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.3.1.1 "><p id="en-us_topic_0000001058830807_p148962361278"><a name="en-us_topic_0000001058830807_p148962361278"></a><a name="en-us_topic_0000001058830807_p148962361278"></a>source-over</p> 2400 </td> 2401 <td class="cellrowborder" valign="top" width="87.22%" headers="mcps1.1.3.1.2 "><p id="en-us_topic_0000001058830807_p4897123622710"><a name="en-us_topic_0000001058830807_p4897123622710"></a><a name="en-us_topic_0000001058830807_p4897123622710"></a>Displays the new drawing above the existing drawing. This attribute is used by default.</p> 2402 </td> 2403 </tr> 2404 <tr id="en-us_topic_0000001058830807_row1789713361277"><td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.3.1.1 "><p id="en-us_topic_0000001058830807_p08971936182713"><a name="en-us_topic_0000001058830807_p08971936182713"></a><a name="en-us_topic_0000001058830807_p08971936182713"></a>source-atop</p> 2405 </td> 2406 <td class="cellrowborder" valign="top" width="87.22%" headers="mcps1.1.3.1.2 "><p id="en-us_topic_0000001058830807_p489743619271"><a name="en-us_topic_0000001058830807_p489743619271"></a><a name="en-us_topic_0000001058830807_p489743619271"></a>Displays the new drawing on the top of the existing drawing.</p> 2407 </td> 2408 </tr> 2409 <tr id="en-us_topic_0000001058830807_row38977367271"><td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.3.1.1 "><p id="en-us_topic_0000001058830807_p1897183620278"><a name="en-us_topic_0000001058830807_p1897183620278"></a><a name="en-us_topic_0000001058830807_p1897183620278"></a>source-in</p> 2410 </td> 2411 <td class="cellrowborder" valign="top" width="87.22%" headers="mcps1.1.3.1.2 "><p id="en-us_topic_0000001058830807_p4897173615271"><a name="en-us_topic_0000001058830807_p4897173615271"></a><a name="en-us_topic_0000001058830807_p4897173615271"></a>Displays the new drawing inside the existing drawing.</p> 2412 </td> 2413 </tr> 2414 <tr id="en-us_topic_0000001058830807_row38971336142717"><td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.3.1.1 "><p id="en-us_topic_0000001058830807_p158971136112719"><a name="en-us_topic_0000001058830807_p158971136112719"></a><a name="en-us_topic_0000001058830807_p158971136112719"></a>source-out</p> 2415 </td> 2416 <td class="cellrowborder" valign="top" width="87.22%" headers="mcps1.1.3.1.2 "><p id="en-us_topic_0000001058830807_p2897103642715"><a name="en-us_topic_0000001058830807_p2897103642715"></a><a name="en-us_topic_0000001058830807_p2897103642715"></a>Displays part of the new drawing that is outside of the existing drawing.</p> 2417 </td> 2418 </tr> 2419 <tr id="en-us_topic_0000001058830807_row889714368273"><td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.3.1.1 "><p id="en-us_topic_0000001058830807_p138974368279"><a name="en-us_topic_0000001058830807_p138974368279"></a><a name="en-us_topic_0000001058830807_p138974368279"></a>destination-over</p> 2420 </td> 2421 <td class="cellrowborder" valign="top" width="87.22%" headers="mcps1.1.3.1.2 "><p id="en-us_topic_0000001058830807_p11897123622719"><a name="en-us_topic_0000001058830807_p11897123622719"></a><a name="en-us_topic_0000001058830807_p11897123622719"></a>Displays the existing drawing above the new drawing.</p> 2422 </td> 2423 </tr> 2424 <tr id="en-us_topic_0000001058830807_row28972366277"><td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.3.1.1 "><p id="en-us_topic_0000001058830807_p148971836152715"><a name="en-us_topic_0000001058830807_p148971836152715"></a><a name="en-us_topic_0000001058830807_p148971836152715"></a>destination-atop</p> 2425 </td> 2426 <td class="cellrowborder" valign="top" width="87.22%" headers="mcps1.1.3.1.2 "><p id="en-us_topic_0000001058830807_p1789783602717"><a name="en-us_topic_0000001058830807_p1789783602717"></a><a name="en-us_topic_0000001058830807_p1789783602717"></a>Displays the existing drawing above the new drawing.</p> 2427 </td> 2428 </tr> 2429 <tr id="en-us_topic_0000001058830807_row198971836162712"><td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.3.1.1 "><p id="en-us_topic_0000001058830807_p17897536112720"><a name="en-us_topic_0000001058830807_p17897536112720"></a><a name="en-us_topic_0000001058830807_p17897536112720"></a>destination-in</p> 2430 </td> 2431 <td class="cellrowborder" valign="top" width="87.22%" headers="mcps1.1.3.1.2 "><p id="en-us_topic_0000001058830807_p789783692713"><a name="en-us_topic_0000001058830807_p789783692713"></a><a name="en-us_topic_0000001058830807_p789783692713"></a>Displays the existing drawing inside the new drawing.</p> 2432 </td> 2433 </tr> 2434 <tr id="en-us_topic_0000001058830807_row138978361271"><td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.3.1.1 "><p id="en-us_topic_0000001058830807_p1589753622718"><a name="en-us_topic_0000001058830807_p1589753622718"></a><a name="en-us_topic_0000001058830807_p1589753622718"></a>destination-out</p> 2435 </td> 2436 <td class="cellrowborder" valign="top" width="87.22%" headers="mcps1.1.3.1.2 "><p id="en-us_topic_0000001058830807_p19897036192710"><a name="en-us_topic_0000001058830807_p19897036192710"></a><a name="en-us_topic_0000001058830807_p19897036192710"></a>Displays part of the existing drawing that is outside of the new drawing.</p> 2437 </td> 2438 </tr> 2439 <tr id="en-us_topic_0000001058830807_row2897143622719"><td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.3.1.1 "><p id="en-us_topic_0000001058830807_p489733613272"><a name="en-us_topic_0000001058830807_p489733613272"></a><a name="en-us_topic_0000001058830807_p489733613272"></a>lighter</p> 2440 </td> 2441 <td class="cellrowborder" valign="top" width="87.22%" headers="mcps1.1.3.1.2 "><p id="en-us_topic_0000001058830807_p589793615274"><a name="en-us_topic_0000001058830807_p589793615274"></a><a name="en-us_topic_0000001058830807_p589793615274"></a>Displays both the new drawing and the existing drawing.</p> 2442 </td> 2443 </tr> 2444 <tr id="en-us_topic_0000001058830807_row289716361272"><td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.3.1.1 "><p id="en-us_topic_0000001058830807_p1389720362272"><a name="en-us_topic_0000001058830807_p1389720362272"></a><a name="en-us_topic_0000001058830807_p1389720362272"></a>copy</p> 2445 </td> 2446 <td class="cellrowborder" valign="top" width="87.22%" headers="mcps1.1.3.1.2 "><p id="en-us_topic_0000001058830807_p589719364271"><a name="en-us_topic_0000001058830807_p589719364271"></a><a name="en-us_topic_0000001058830807_p589719364271"></a>Displays the new drawing and neglects the existing drawing.</p> 2447 </td> 2448 </tr> 2449 <tr id="en-us_topic_0000001058830807_row16897103652713"><td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.3.1.1 "><p id="en-us_topic_0000001058830807_p1489793612279"><a name="en-us_topic_0000001058830807_p1489793612279"></a><a name="en-us_topic_0000001058830807_p1489793612279"></a>xor</p> 2450 </td> 2451 <td class="cellrowborder" valign="top" width="87.22%" headers="mcps1.1.3.1.2 "><p id="en-us_topic_0000001058830807_p789718368275"><a name="en-us_topic_0000001058830807_p789718368275"></a><a name="en-us_topic_0000001058830807_p789718368275"></a>Combines the new drawing and existing drawing using the XOR operation.</p> 2452 </td> 2453 </tr> 2454 </tbody> 2455 </table> 2456 2457- Return Value 2458 2459 N/A 2460 2461- Example 2462 2463  2464 2465 ``` 2466 ctx.fillStyle = 'rgb(255,0,0)'; 2467 ctx.fillRect(20, 20, 50, 50); 2468 ctx.globalCompositeOperation = 'source-over'; 2469 ctx.fillStyle = 'rgb(0,0,255)'; 2470 ctx.fillRect(50, 50, 50, 50); 2471 // Start drawing second example 2472 ctx.fillStyle = 'rgb(255,0,0)'; 2473 ctx.fillRect(120, 20, 50, 50); 2474 ctx.globalCompositeOperation = 'destination-over'; 2475 ctx.fillStyle = 'rgb(0,0,255)'; 2476 ctx.fillRect(150, 50, 50, 50); 2477 ``` 2478 2479 In the above example, the blue rectangle represents the new drawing, and the red rectangle represents the existing drawing. 2480 2481 2482## shadowBlur<a name="en-us_topic_0000001058830807_section6207051888"></a> 2483 2484Sets the shadow blur degree. 2485 2486- Parameter 2487 2488 <a name="en-us_topic_0000001058830807_table9996192417289"></a> 2489 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row1512122513281"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p15127251281"><a name="en-us_topic_0000001058830807_p15127251281"></a><a name="en-us_topic_0000001058830807_p15127251281"></a>Name</p> 2490 </th> 2491 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p1812152514289"><a name="en-us_topic_0000001058830807_p1812152514289"></a><a name="en-us_topic_0000001058830807_p1812152514289"></a>Type</p> 2492 </th> 2493 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p14125256281"><a name="en-us_topic_0000001058830807_p14125256281"></a><a name="en-us_topic_0000001058830807_p14125256281"></a>Description</p> 2494 </th> 2495 </tr> 2496 </thead> 2497 <tbody><tr id="en-us_topic_0000001058830807_row171242519288"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p151210252280"><a name="en-us_topic_0000001058830807_p151210252280"></a><a name="en-us_topic_0000001058830807_p151210252280"></a>blur</p> 2498 </td> 2499 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p31212513284"><a name="en-us_topic_0000001058830807_p31212513284"></a><a name="en-us_topic_0000001058830807_p31212513284"></a>number</p> 2500 </td> 2501 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p61202519282"><a name="en-us_topic_0000001058830807_p61202519282"></a><a name="en-us_topic_0000001058830807_p61202519282"></a>Shadow blur degree. A larger value indicates a more blurred shadow. The value is of the float type, and the default value is <strong id="en-us_topic_0000001058830807_b184038301724"><a name="en-us_topic_0000001058830807_b184038301724"></a><a name="en-us_topic_0000001058830807_b184038301724"></a>0</strong>.</p> 2502 </td> 2503 </tr> 2504 </tbody> 2505 </table> 2506 2507- Return Value 2508 2509 N/A 2510 2511- Example 2512 2513  2514 2515 ``` 2516 ctx.shadowBlur = 30; 2517 ctx.shadowColor = 'rgb(0,0,0)'; 2518 ctx.fillStyle = 'rgb(255,0,0)'; 2519 ctx.fillRect(20, 20, 100, 80); 2520 ``` 2521 2522 2523## shadowColor<a name="en-us_topic_0000001058830807_section42724396120"></a> 2524 2525Sets the shadow color. 2526 2527- Parameter 2528 2529 <a name="en-us_topic_0000001058830807_table2196196152919"></a> 2530 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row221256162918"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p1621219612291"><a name="en-us_topic_0000001058830807_p1621219612291"></a><a name="en-us_topic_0000001058830807_p1621219612291"></a>Name</p> 2531 </th> 2532 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p112127613291"><a name="en-us_topic_0000001058830807_p112127613291"></a><a name="en-us_topic_0000001058830807_p112127613291"></a>Type</p> 2533 </th> 2534 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p102121966294"><a name="en-us_topic_0000001058830807_p102121966294"></a><a name="en-us_topic_0000001058830807_p102121966294"></a>Description</p> 2535 </th> 2536 </tr> 2537 </thead> 2538 <tbody><tr id="en-us_topic_0000001058830807_row1321219682914"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p6212186142912"><a name="en-us_topic_0000001058830807_p6212186142912"></a><a name="en-us_topic_0000001058830807_p6212186142912"></a>color</p> 2539 </td> 2540 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p221236122920"><a name="en-us_topic_0000001058830807_p221236122920"></a><a name="en-us_topic_0000001058830807_p221236122920"></a><color></p> 2541 </td> 2542 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p112223307597"><a name="en-us_topic_0000001058830807_p112223307597"></a><a name="en-us_topic_0000001058830807_p112223307597"></a>Shadow color</p> 2543 </td> 2544 </tr> 2545 </tbody> 2546 </table> 2547 2548- Return Value 2549 2550 N/A 2551 2552- Example 2553 2554  2555 2556 ``` 2557 ctx.shadowBlur = 30; 2558 ctx.shadowColor = 'rgb(0,0,255)'; 2559 ctx.fillStyle = 'rgb(255,0,0)'; 2560 ctx.fillRect(30, 30, 100, 100); 2561 ``` 2562 2563 2564## shadowOffsetX<a name="en-us_topic_0000001058830807_section1616174021219"></a> 2565 2566Sets the x-axis shadow offset relative to the original object. 2567 2568- Parameter 2569 2570 <a name="en-us_topic_0000001058830807_table2274164413292"></a> 2571 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row229011445292"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p1329034420297"><a name="en-us_topic_0000001058830807_p1329034420297"></a><a name="en-us_topic_0000001058830807_p1329034420297"></a>Name</p> 2572 </th> 2573 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p19290444112916"><a name="en-us_topic_0000001058830807_p19290444112916"></a><a name="en-us_topic_0000001058830807_p19290444112916"></a>Type</p> 2574 </th> 2575 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p529054472920"><a name="en-us_topic_0000001058830807_p529054472920"></a><a name="en-us_topic_0000001058830807_p529054472920"></a>Description</p> 2576 </th> 2577 </tr> 2578 </thead> 2579 <tbody><tr id="en-us_topic_0000001058830807_row122901544132911"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p2029084482915"><a name="en-us_topic_0000001058830807_p2029084482915"></a><a name="en-us_topic_0000001058830807_p2029084482915"></a>offsetX</p> 2580 </td> 2581 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p122901744162919"><a name="en-us_topic_0000001058830807_p122901744162919"></a><a name="en-us_topic_0000001058830807_p122901744162919"></a>number</p> 2582 </td> 2583 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p1429084432917"><a name="en-us_topic_0000001058830807_p1429084432917"></a><a name="en-us_topic_0000001058830807_p1429084432917"></a>X-axis shadow offset relative to the original object.</p> 2584 </td> 2585 </tr> 2586 </tbody> 2587 </table> 2588 2589- Return Value 2590 2591 N/A 2592 2593- Example 2594 2595  2596 2597 ``` 2598 ctx.shadowBlur = 10; 2599 ctx.shadowOffsetX = 20; 2600 ctx.shadowColor = 'rgb(0,0,0)'; 2601 ctx.fillStyle = 'rgb(255,0,0)'; 2602 ctx.fillRect(20, 20, 100, 80); 2603 ``` 2604 2605 2606## shadowOffsetY<a name="en-us_topic_0000001058830807_section272013417128"></a> 2607 2608Sets the y-axis shadow offset relative to the original object. 2609 2610- Parameter 2611 2612 <a name="en-us_topic_0000001058830807_table20807026143014"></a> 2613 <table><thead align="left"><tr id="en-us_topic_0000001058830807_row18231126113017"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058830807_p7823192615306"><a name="en-us_topic_0000001058830807_p7823192615306"></a><a name="en-us_topic_0000001058830807_p7823192615306"></a>Name</p> 2614 </th> 2615 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058830807_p88231426193012"><a name="en-us_topic_0000001058830807_p88231426193012"></a><a name="en-us_topic_0000001058830807_p88231426193012"></a>Type</p> 2616 </th> 2617 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058830807_p16823626193018"><a name="en-us_topic_0000001058830807_p16823626193018"></a><a name="en-us_topic_0000001058830807_p16823626193018"></a>Description</p> 2618 </th> 2619 </tr> 2620 </thead> 2621 <tbody><tr id="en-us_topic_0000001058830807_row178231526113019"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058830807_p13823172643018"><a name="en-us_topic_0000001058830807_p13823172643018"></a><a name="en-us_topic_0000001058830807_p13823172643018"></a>offsetY</p> 2622 </td> 2623 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058830807_p482312683018"><a name="en-us_topic_0000001058830807_p482312683018"></a><a name="en-us_topic_0000001058830807_p482312683018"></a>number</p> 2624 </td> 2625 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058830807_p4823182619305"><a name="en-us_topic_0000001058830807_p4823182619305"></a><a name="en-us_topic_0000001058830807_p4823182619305"></a>Y-axis shadow offset relative to the original object.</p> 2626 </td> 2627 </tr> 2628 </tbody> 2629 </table> 2630 2631- Return Value 2632 2633 N/A 2634 2635- Example 2636 2637  2638 2639 ``` 2640 ctx.shadowBlur = 10; 2641 ctx.shadowOffsetY = 20; 2642 ctx.shadowColor = 'rgb(0,0,0)'; 2643 ctx.fillStyle = 'rgb(255,0,0)'; 2644 ctx.fillRect(30, 30, 100, 100); 2645 ``` 2646 2647 2648
