1# CanvasRenderingContext2D 2 3Use **RenderingContext** to draw rectangles, text, images, and other objects on a canvas. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10 11## APIs 12 13CanvasRenderingContext2D(settings?: RenderingContextSettings) 14 15Since API version 9, this API is supported in ArkTS widgets. 16 17**Parameters** 18 19| Name | Type | Mandatory | Description | 20| -------- | ---------------------------------------- | ---- | ---------------------------------------- | 21| settings | [RenderingContextSettings](#renderingcontextsettings) | No | Settings of the **CanvasRenderingContext2D** object. For details, see [RenderingContextSettings](#renderingcontextsettings).| 22 23 24### RenderingContextSettings 25 26RenderingContextSettings(antialias?: boolean) 27 28Configures the settings of a **CanvasRenderingContext2D** object, including whether to enable antialiasing. 29 30Since API version 9, this API is supported in ArkTS widgets. 31 32**Parameters** 33 34| Name | Type | Mandatory | Description | 35| --------- | ------- | ---- | ----------------------------- | 36| antialias | boolean | No | Whether to enable antialiasing.<br>Default value: **false**| 37 38 39## Attributes 40 41| Name | Type | Description | 42| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | 43| [fillStyle](#fillstyle) | string \|number<sup>10+</sup> \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | Style to fill an area.<br>- When the type is string, this attribute indicates the color of the fill area.<br>Default value: **'black'**<br>- When the type is number, this attribute indicates the color of the fill area.<br>Default value: **'#000000'**<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.<br>Since API version 9, this API is supported in ArkTS widgets.| 44| [lineWidth](#linewidth) | number | Line width.<br>Default value: **1(px)**<br>Unit: vp<br> The value cannot be **0** or a negative number. If it is set to **0** or a negative number, the default value is used instead. | 45| [strokeStyle](#strokestyle) | string \| number<sup>10+</sup> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | Stroke color.<br>Default value: **'black'**<br>Default value: **'#000000'**<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.<br>Since API version 9, this API is supported in ArkTS widgets.| 46| [lineCap](#linecap) | [CanvasLineCap](#canvaslinecap) | Style of the line endpoints. The options are as follows:<br>- **'butt'**: The endpoints of the line are squared off.<br>- **'round'**: The endpoints of the line are rounded.<br>- **'square'**: The endpoints of the line are squared off by adding a box with an equal width and half the height of the line's thickness.<br>Default value: **'butt'**<br>Since API version 9, this API is supported in ArkTS widgets.| 47| [lineJoin](#linejoin) | [CanvasLineJoin](#canvaslinejoin) | Style of the shape used to join line segments. The options are as follows:<br>- **'round'**: The shape used to join line segments is a sector, whose radius at the rounded corner is equal to the line width.<br>- **'bevel'**: The shape used to join line segments is a triangle. The rectangular corner of each line is independent.<br>- **'miter'**: The shape used to join line segments has a mitered corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in **miterLimit**.<br>Default value: **'miter'**<br>Since API version 9, this API is supported in ArkTS widgets.| 48| [miterLimit](#miterlimit) | number | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.<br>Default value: **10**<br>Unit: px<br>The value cannot be **0** or a negative number. If it is set to **0** or a negative number, the default value is used instead.<br>Since API version 9, this API is supported in ArkTS widgets.| 49| [font](#font) | string | Font style.<br>Syntax: ctx.font='font-size font-family'<br>- (Optional) **font-size**: font size and line height. The unit can be px or vp.<br>- (Optional) **font-family**: font family.<br>Syntax: ctx.font='font-style font-weight font-size font-family'<br>- (Optional) **font-style**: font style. Available values are **'normal'** and **'italic'**.<br>- (Optional) **font-weight**: font weight. Available values are as follows: **'normal'**, **'bold'**, **'bolder'**, **'lighter'**, **'100'**, **'200'**, **'300'**, **'400'**, **'500'**, **'600'**, **'700'**, **'800'**, **'900'**.<br>- (Optional) **font-size**: font size and line height. The unit must be specified and can be px or vp.<br>- (Optional) **font-family**: font family. Available values are **'sans-serif'**, **'serif'**, and **'monospace'**.<br>Default value: **'normal normal 14px sans-serif'**<br>Since API version 9, this API is supported in ArkTS widgets.| 50| [textAlign](#textalign) | [CanvasTextAlign](#canvastextalign) | Text alignment mode. Available values are as follows:<br>- **'left'**: The text is left-aligned.<br>- **'right'**: The text is right-aligned.<br>- **'center'**: The text is center-aligned.<br>- **'start'**: The text is aligned with the start bound.<br>- **'end'**: The text is aligned with the end bound.<br>In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**.<br>Default value: **'left'**<br>Since API version 9, this API is supported in ArkTS widgets.| 51| [textBaseline](#textbaseline) | [CanvasTextBaseline](#canvastextbaseline) | Horizontal alignment mode of text. Available values are as follows:<br>- **'alphabetic'**: The text baseline is the normal alphabetic baseline.<br>- **'top'**: The text baseline is on the top of the text bounding box.<br>- **'hanging'**: The text baseline is a hanging baseline over the text.<br>- **'middle'**: The text baseline is in the middle of the text bounding box.<br>**'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.<br>- **'bottom'**: 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.<br>Default value: **'alphabetic'**<br>Since API version 9, this API is supported in ArkTS widgets.| 52| [globalAlpha](#globalalpha) | number | Opacity.<br>**0.0**: completely transparent.<br>**1.0**: completely opaque.<br>Default value: **1.0**<br>Since API version 9, this API is supported in ArkTS widgets.| 53| [lineDashOffset](#linedashoffset) | number | Offset of the dashed line. The precision is float.<br>Default value: **0.0**<br>Unit: px<br>Since API version 9, this API is supported in ArkTS widgets.| 54| [globalCompositeOperation](#globalcompositeoperation) | string | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**.<br>Default value: **'source-over'**<br>Since API version 9, this API is supported in ArkTS widgets.| 55| [shadowBlur](#shadowblur) | number | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float.<br>Default value: **0.0**<br>The value cannot be a negative number. If it is set to a negative number, the default value is used instead.<br>Since API version 9, this API is supported in ArkTS widgets.| 56| [shadowColor](#shadowcolor) | string | Shadow color.<br>Default value: transparent black<br>Since API version 9, this API is supported in ArkTS widgets.| 57| [shadowOffsetX](#shadowoffsetx) | number | X-axis shadow offset relative to the original object.<br>Default value: **0**<br>Unit: vp<br>Since API version 9, this API is supported in ArkTS widgets.| 58| [shadowOffsetY](#shadowoffsety) | number | Y-axis shadow offset relative to the original object.<br>Default value: **0**<br>Unit: vp<br>Since API version 9, this API is supported in ArkTS widgets.| 59| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite.<br>Default value: **true**<br>Since API version 9, this API is supported in ArkTS widgets.| 60| [height](#height) | number | Component height.<br>Unit: vp<br>Since API version 9, this API is supported in ArkTS widgets.| 61| [width](#width) | number | Component width.<br>Unit: vp<br>Since API version 9, this API is supported in ArkTS widgets.| 62| [imageSmoothingQuality](#imagesmoothingquality) | [ImageSmoothingQuality](#imagesmoothingquality-1) | Quality of image smoothing. This attribute works only when **imageSmoothingEnabled** is set to **true**.<br>Default value: **ImageSmoothingQuality.low**<br>Since API version 9, this API is supported in ArkTS widgets.| 63| [direction](#direction) | [CanvasDirection](#canvasdirection) | Text direction used for drawing text.<br>Default value: **CanvasDirection.inherit**<br>Since API version 9, this API is supported in ArkTS widgets.| 64| [filter](#filter) | string | Filter effect. Available values are as follows:<br>- **'none'**: no filter effect.<br>- **'blur'**: applies the Gaussian blur for the image.<br>- **'brightness'**: applies a linear multiplication to the image to make it look brighter or darker.<br>- **'contrast'**: adjusts the image contrast.<br>- **'grayscale'**: converts the image to a grayscale image.<br>- **'hue-rotate'**: applies hue rotation to the image.<br>- **'invert'**: inverts the input image.<br>- **'opacity'**: sets the opacity of the image.<br>- **'saturate'**: sets the saturation of the image.<br>- **'sepia'**: converts the image to dark brown.<br>Default value: **'none'**<br>Since API version 9, this API is supported in ArkTS widgets.| 65 66> **NOTE** 67> 68> The string-type value of **fillStyle**, **shadowColor**, and **strokeStyle** can be in 'rgb(255, 255, 255)', 'rgba(255, 255, 255, 1.0)', or '\#FFFFFF' format. 69 70 71### fillStyle 72 73```ts 74// xxx.ets 75@Entry 76@Component 77struct FillStyleExample { 78 private settings: RenderingContextSettings = new RenderingContextSettings(true) 79 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 80 81 build() { 82 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 83 Canvas(this.context) 84 .width('100%') 85 .height('100%') 86 .backgroundColor('#ffff00') 87 .onReady(() =>{ 88 this.context.fillStyle = '#0000ff' 89 this.context.fillRect(20, 20, 150, 100) 90 }) 91 } 92 .width('100%') 93 .height('100%') 94 } 95} 96``` 97 98 99 100 101### lineWidth 102 103```ts 104// xxx.ets 105@Entry 106@Component 107struct LineWidthExample { 108 private settings: RenderingContextSettings = new RenderingContextSettings(true) 109 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 110 111 build() { 112 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 113 Canvas(this.context) 114 .width('100%') 115 .height('100%') 116 .backgroundColor('#ffff00') 117 .onReady(() =>{ 118 this.context.lineWidth = 5 119 this.context.strokeRect(25, 25, 85, 105) 120 }) 121 } 122 .width('100%') 123 .height('100%') 124 } 125} 126``` 127 128 129 130 131### strokeStyle 132 133```ts 134// xxx.ets 135@Entry 136@Component 137struct StrokeStyleExample { 138 private settings: RenderingContextSettings = new RenderingContextSettings(true) 139 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 140 141 build() { 142 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 143 Canvas(this.context) 144 .width('100%') 145 .height('100%') 146 .backgroundColor('#ffff00') 147 .onReady(() =>{ 148 this.context.lineWidth = 10 149 this.context.strokeStyle = '#0000ff' 150 this.context.strokeRect(25, 25, 155, 105) 151 }) 152 } 153 .width('100%') 154 .height('100%') 155 } 156} 157``` 158 159 160 161 162 163### lineCap 164 165```ts 166// xxx.ets 167@Entry 168@Component 169struct LineCapExample { 170 private settings: RenderingContextSettings = new RenderingContextSettings(true) 171 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 172 173 build() { 174 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 175 Canvas(this.context) 176 .width('100%') 177 .height('100%') 178 .backgroundColor('#ffff00') 179 .onReady(() =>{ 180 this.context.lineWidth = 8 181 this.context.beginPath() 182 this.context.lineCap = 'round' 183 this.context.moveTo(30, 50) 184 this.context.lineTo(220, 50) 185 this.context.stroke() 186 }) 187 } 188 .width('100%') 189 .height('100%') 190 } 191} 192``` 193 194 195 196 197### lineJoin 198 199```ts 200// xxx.ets 201@Entry 202@Component 203struct LineJoinExample { 204 private settings: RenderingContextSettings = new RenderingContextSettings(true) 205 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 206 207 build() { 208 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 209 Canvas(this.context) 210 .width('100%') 211 .height('100%') 212 .backgroundColor('#ffff00') 213 .onReady(() =>{ 214 this.context.beginPath() 215 this.context.lineWidth = 8 216 this.context.lineJoin = 'miter' 217 this.context.moveTo(30, 30) 218 this.context.lineTo(120, 60) 219 this.context.lineTo(30, 110) 220 this.context.stroke() 221 }) 222 } 223 .width('100%') 224 .height('100%') 225 } 226} 227``` 228 229 230 231 232### miterLimit 233 234```ts 235// xxx.ets 236@Entry 237@Component 238struct MiterLimit { 239 private settings: RenderingContextSettings = new RenderingContextSettings(true) 240 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 241 242 build() { 243 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 244 Canvas(this.context) 245 .width('100%') 246 .height('100%') 247 .backgroundColor('#ffff00') 248 .onReady(() =>{ 249 this.context.lineWidth = 8 250 this.context.lineJoin = 'miter' 251 this.context.miterLimit = 3 252 this.context.moveTo(30, 30) 253 this.context.lineTo(60, 35) 254 this.context.lineTo(30, 37) 255 this.context.stroke() 256 }) 257 } 258 .width('100%') 259 .height('100%') 260 } 261} 262``` 263 264 265 266 267### font 268 269```ts 270// xxx.ets 271@Entry 272@Component 273struct Fonts { 274 private settings: RenderingContextSettings = new RenderingContextSettings(true) 275 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 276 277 build() { 278 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 279 Canvas(this.context) 280 .width('100%') 281 .height('100%') 282 .backgroundColor('#ffff00') 283 .onReady(() =>{ 284 this.context.font = '30px sans-serif' 285 this.context.fillText("Hello px", 20, 60) 286 this.context.font = '30vp sans-serif' 287 this.context.fillText("Hello vp", 20, 100) 288 }) 289 } 290 .width('100%') 291 .height('100%') 292 } 293} 294``` 295 296 297 298 299### textAlign 300 301```ts 302// xxx.ets 303@Entry 304@Component 305struct CanvasExample { 306 private settings: RenderingContextSettings = new RenderingContextSettings(true) 307 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 308 309 build() { 310 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 311 Canvas(this.context) 312 .width('100%') 313 .height('100%') 314 .backgroundColor('#ffff00') 315 .onReady(() =>{ 316 this.context.strokeStyle = '#0000ff' 317 this.context.moveTo(140, 10) 318 this.context.lineTo(140, 160) 319 this.context.stroke() 320 this.context.font = '18px sans-serif' 321 this.context.textAlign = 'start' 322 this.context.fillText('textAlign=start', 140, 60) 323 this.context.textAlign = 'end' 324 this.context.fillText('textAlign=end', 140, 80) 325 this.context.textAlign = 'left' 326 this.context.fillText('textAlign=left', 140, 100) 327 this.context.textAlign = 'center' 328 this.context.fillText('textAlign=center',140, 120) 329 this.context.textAlign = 'right' 330 this.context.fillText('textAlign=right',140, 140) 331 }) 332 } 333 .width('100%') 334 .height('100%') 335 } 336} 337``` 338 339 340 341 342### textBaseline 343 344```ts 345// xxx.ets 346@Entry 347@Component 348struct TextBaseline { 349 private settings: RenderingContextSettings = new RenderingContextSettings(true) 350 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 351 352 build() { 353 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 354 Canvas(this.context) 355 .width('100%') 356 .height('100%') 357 .backgroundColor('#ffff00') 358 .onReady(() =>{ 359 this.context.strokeStyle = '#0000ff' 360 this.context.moveTo(0, 120) 361 this.context.lineTo(400, 120) 362 this.context.stroke() 363 this.context.font = '20px sans-serif' 364 this.context.textBaseline = 'top' 365 this.context.fillText('Top', 10, 120) 366 this.context.textBaseline = 'bottom' 367 this.context.fillText('Bottom', 55, 120) 368 this.context.textBaseline = 'middle' 369 this.context.fillText('Middle', 125, 120) 370 this.context.textBaseline = 'alphabetic' 371 this.context.fillText('Alphabetic', 195, 120) 372 this.context.textBaseline = 'hanging' 373 this.context.fillText('Hanging', 295, 120) 374 }) 375 } 376 .width('100%') 377 .height('100%') 378 } 379} 380``` 381 382 383 384 385### globalAlpha 386 387```ts 388// xxx.ets 389@Entry 390@Component 391struct GlobalAlpha { 392 private settings: RenderingContextSettings = new RenderingContextSettings(true) 393 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 394 395 build() { 396 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 397 Canvas(this.context) 398 .width('100%') 399 .height('100%') 400 .backgroundColor('#ffff00') 401 .onReady(() =>{ 402 this.context.fillStyle = 'rgb(0,0,255)' 403 this.context.fillRect(0, 0, 50, 50) 404 this.context.globalAlpha = 0.4 405 this.context.fillStyle = 'rgb(0,0,255)' 406 this.context.fillRect(50, 50, 50, 50) 407 }) 408 } 409 .width('100%') 410 .height('100%') 411 } 412} 413``` 414 415 416 417 418### lineDashOffset 419 420```ts 421// xxx.ets 422@Entry 423@Component 424struct LineDashOffset { 425 private settings: RenderingContextSettings = new RenderingContextSettings(true) 426 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 427 428 build() { 429 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 430 Canvas(this.context) 431 .width('100%') 432 .height('100%') 433 .backgroundColor('#ffff00') 434 .onReady(() =>{ 435 this.context.arc(100, 75, 50, 0, 6.28) 436 this.context.setLineDash([10,20]) 437 this.context.lineDashOffset = 10.0 438 this.context.stroke() 439 }) 440 } 441 .width('100%') 442 .height('100%') 443 } 444} 445``` 446 447 448 449 450### globalCompositeOperation 451 452| Name | Description | 453| ---------------- | ------------------------ | 454| source-over | Displays the new drawing above the existing drawing. This attribute is used by default. | 455| source-atop | Displays the new drawing on the top of the existing drawing. | 456| source-in | Displays the new drawing inside the existing drawing. | 457| source-out | Displays part of the new drawing that is outside of the existing drawing. | 458| destination-over | Displays the existing drawing above the new drawing. | 459| destination-atop | Displays the existing drawing on the top of the new drawing. | 460| destination-in | Displays the existing drawing inside the new drawing. | 461| destination-out | Displays the existing drawing outside the new drawing. | 462| lighter | Displays both the new and existing drawing. | 463| copy | Displays the new drawing and neglects the existing drawing. | 464| xor | Combines the new drawing and existing drawing using the XOR operation.| 465 466```ts 467// xxx.ets 468@Entry 469@Component 470struct GlobalCompositeOperation { 471 private settings: RenderingContextSettings = new RenderingContextSettings(true) 472 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 473 474 build() { 475 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 476 Canvas(this.context) 477 .width('100%') 478 .height('100%') 479 .backgroundColor('#ffff00') 480 .onReady(() =>{ 481 this.context.fillStyle = 'rgb(255,0,0)' 482 this.context.fillRect(20, 20, 50, 50) 483 this.context.globalCompositeOperation = 'source-over' 484 this.context.fillStyle = 'rgb(0,0,255)' 485 this.context.fillRect(50, 50, 50, 50) 486 this.context.fillStyle = 'rgb(255,0,0)' 487 this.context.fillRect(120, 20, 50, 50) 488 this.context.globalCompositeOperation = 'destination-over' 489 this.context.fillStyle = 'rgb(0,0,255)' 490 this.context.fillRect(150, 50, 50, 50) 491 }) 492 } 493 .width('100%') 494 .height('100%') 495 } 496} 497``` 498 499 500 501 502### shadowBlur 503 504```ts 505// xxx.ets 506@Entry 507@Component 508struct ShadowBlur { 509 private settings: RenderingContextSettings = new RenderingContextSettings(true) 510 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 511 512 build() { 513 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 514 Canvas(this.context) 515 .width('100%') 516 .height('100%') 517 .backgroundColor('#ffff00') 518 .onReady(() =>{ 519 this.context.shadowBlur = 30 520 this.context.shadowColor = 'rgb(0,0,0)' 521 this.context.fillStyle = 'rgb(255,0,0)' 522 this.context.fillRect(20, 20, 100, 80) 523 }) 524 } 525 .width('100%') 526 .height('100%') 527 } 528} 529``` 530 531 532 533 534### shadowColor 535 536```ts 537// xxx.ets 538@Entry 539@Component 540struct ShadowColor { 541 private settings: RenderingContextSettings = new RenderingContextSettings(true) 542 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 543 544 build() { 545 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 546 Canvas(this.context) 547 .width('100%') 548 .height('100%') 549 .backgroundColor('#ffff00') 550 .onReady(() =>{ 551 this.context.shadowBlur = 30 552 this.context.shadowColor = 'rgb(0,0,255)' 553 this.context.fillStyle = 'rgb(255,0,0)' 554 this.context.fillRect(30, 30, 100, 100) 555 }) 556 } 557 .width('100%') 558 .height('100%') 559 } 560} 561``` 562 563 564 565 566### shadowOffsetX 567 568```ts 569// xxx.ets 570@Entry 571@Component 572struct ShadowOffsetX { 573 private settings: RenderingContextSettings = new RenderingContextSettings(true) 574 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 575 576 build() { 577 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 578 Canvas(this.context) 579 .width('100%') 580 .height('100%') 581 .backgroundColor('#ffff00') 582 .onReady(() =>{ 583 this.context.shadowBlur = 10 584 this.context.shadowOffsetX = 20 585 this.context.shadowColor = 'rgb(0,0,0)' 586 this.context.fillStyle = 'rgb(255,0,0)' 587 this.context.fillRect(20, 20, 100, 80) 588 }) 589 } 590 .width('100%') 591 .height('100%') 592 } 593} 594``` 595 596 597 598 599### shadowOffsetY 600 601```ts 602// xxx.ets 603@Entry 604@Component 605struct ShadowOffsetY { 606 private settings: RenderingContextSettings = new RenderingContextSettings(true) 607 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 608 build() { 609 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 610 Canvas(this.context) 611 .width('100%') 612 .height('100%') 613 .backgroundColor('#ffff00') 614 .onReady(() =>{ 615 this.context.shadowBlur = 10 616 this.context.shadowOffsetY = 20 617 this.context.shadowColor = 'rgb(0,0,0)' 618 this.context.fillStyle = 'rgb(255,0,0)' 619 this.context.fillRect(30, 30, 100, 100) 620 }) 621 } 622 .width('100%') 623 .height('100%') 624 } 625} 626``` 627 628 629 630 631### imageSmoothingEnabled 632 633```ts 634// xxx.ets 635@Entry 636@Component 637struct ImageSmoothingEnabled { 638 private settings: RenderingContextSettings = new RenderingContextSettings(true) 639 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 640 private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") 641 642 build() { 643 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 644 Canvas(this.context) 645 .width('100%') 646 .height('100%') 647 .backgroundColor('#ffff00') 648 .onReady(() =>{ 649 this.context.imageSmoothingEnabled = false 650 this.context.drawImage( this.img,0,0,400,200) 651 }) 652 } 653 .width('100%') 654 .height('100%') 655 } 656} 657``` 658 659 660 661 662### height 663 664```ts 665// xxx.ets 666@Entry 667@Component 668struct HeightExample { 669 private settings: RenderingContextSettings = new RenderingContextSettings(true) 670 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 671 672 build() { 673 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 674 Canvas(this.context) 675 .width(300) 676 .height(300) 677 .backgroundColor('#ffff00') 678 .onReady(() => { 679 let h = this.context.height 680 this.context.fillRect(0, 0, 300, h/2) 681 }) 682 } 683 .width('100%') 684 .height('100%') 685 } 686} 687``` 688 689 690 691 692### width 693 694```ts 695// xxx.ets 696@Entry 697@Component 698struct WidthExample { 699 private settings: RenderingContextSettings = new RenderingContextSettings(true) 700 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 701 702 build() { 703 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 704 Canvas(this.context) 705 .width(300) 706 .height(300) 707 .backgroundColor('#ffff00') 708 .onReady(() => { 709 let w = this.context.width 710 this.context.fillRect(0, 0, w/2, 300) 711 }) 712 } 713 .width('100%') 714 .height('100%') 715 } 716} 717``` 718 719 720 721 722### imageSmoothingQuality 723 724```ts 725 // xxx.ets 726 @Entry 727 @Component 728 struct ImageSmoothingQualityDemo { 729 private settings: RenderingContextSettings = new RenderingContextSettings(true); 730 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 731 private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); 732 733 build() { 734 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 735 Canvas(this.context) 736 .width('100%') 737 .height('100%') 738 .backgroundColor('#ffff00') 739 .onReady(() =>{ 740 let ctx = this.context 741 ctx.imageSmoothingEnabled = true 742 ctx.imageSmoothingQuality = 'high' 743 ctx.drawImage(this.img, 0, 0, 400, 200) 744 }) 745 } 746 .width('100%') 747 .height('100%') 748 } 749 } 750``` 751 752 753 754 755### direction 756 757```ts 758 // xxx.ets 759 @Entry 760 @Component 761 struct DirectionDemo { 762 private settings: RenderingContextSettings = new RenderingContextSettings(true); 763 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 764 765 build() { 766 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 767 Canvas(this.context) 768 .width('100%') 769 .height('100%') 770 .backgroundColor('#ffff00') 771 .onReady(() =>{ 772 let ctx = this.context 773 ctx.font = '48px serif'; 774 ctx.textAlign = 'start' 775 ctx.fillText("Hi ltr!", 200, 50); 776 777 ctx.direction = "rtl"; 778 ctx.fillText("Hi rtl!", 200, 100); 779 }) 780 } 781 .width('100%') 782 .height('100%') 783 } 784 } 785``` 786 787 788 789 790### filter 791 792```ts 793 // xxx.ets 794 @Entry 795 @Component 796 struct FilterDemo { 797 private settings: RenderingContextSettings = new RenderingContextSettings(true); 798 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 799 private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); 800 801 build() { 802 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 803 Canvas(this.context) 804 .width('100%') 805 .height('100%') 806 .backgroundColor('#ffff00') 807 .onReady(() =>{ 808 let ctx = this.context 809 let img = this.img 810 811 ctx.drawImage(img, 0, 0, 100, 100); 812 813 ctx.filter = 'grayscale(50%)'; 814 ctx.drawImage(img, 100, 0, 100, 100); 815 816 ctx.filter = 'sepia(60%)'; 817 ctx.drawImage(img, 200, 0, 100, 100); 818 819 ctx.filter = 'saturate(30%)'; 820 ctx.drawImage(img, 0, 100, 100, 100); 821 822 ctx.filter = 'hue-rotate(90degree)'; 823 ctx.drawImage(img, 100, 100, 100, 100); 824 825 ctx.filter = 'invert(100%)'; 826 ctx.drawImage(img, 200, 100, 100, 100); 827 828 ctx.filter = 'opacity(25%)'; 829 ctx.drawImage(img, 0, 200, 100, 100); 830 831 ctx.filter = 'brightness(0.4)'; 832 ctx.drawImage(img, 100, 200, 100, 100); 833 834 ctx.filter = 'contrast(200%)'; 835 ctx.drawImage(img, 200, 200, 100, 100); 836 837 ctx.filter = 'blur(5px)'; 838 ctx.drawImage(img, 0, 300, 100, 100); 839 840 let result = ctx.toDataURL() 841 console.info(result) 842 }) 843 } 844 .width('100%') 845 .height('100%') 846 } 847 } 848``` 849 850 851 852## Methods 853 854Calls to the following methods on hidden pages will result in cache data. Therefore, avoid frequently refreshing the canvas on hidden pages. 855 856### fillRect 857 858fillRect(x: number, y: number, w: number, h: number): void 859 860Fills a rectangle on the canvas. 861 862Since API version 9, this API is supported in ArkTS widgets. 863 864**Parameters** 865 866| Name | Type | Mandatory | Default Value | Description | 867| ------ | ------ | ---- | ---- | ------------- | 868| x | number | Yes | 0 | X coordinate of the upper left corner of the rectangle, in vp.| 869| y | number | Yes | 0 | Y coordinate of the upper left corner of the rectangle, in vp.| 870| w | number | Yes | 0 | Width of the rectangle, in vp.| 871| h | number | Yes | 0 | Height of the rectangle, in vp.| 872 873**Example** 874 875 ```ts 876 // xxx.ets 877 @Entry 878 @Component 879 struct FillRect { 880 private settings: RenderingContextSettings = new RenderingContextSettings(true) 881 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 882 883 build() { 884 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 885 Canvas(this.context) 886 .width('100%') 887 .height('100%') 888 .backgroundColor('#ffff00') 889 .onReady(() =>{ 890 this.context.fillRect(30,30,100,100) 891 }) 892 } 893 .width('100%') 894 .height('100%') 895 } 896 } 897 ``` 898 899  900 901 902### strokeRect 903 904strokeRect(x: number, y: number, w: number, h: number): void 905 906Draws an outlined rectangle on the canvas. 907 908Since API version 9, this API is supported in ArkTS widgets. 909 910**Parameters** 911 912| Name | Type | Mandatory | Default Value | Description | 913| ---- | ------ | ---- | ---- | ------------ | 914| x | number | Yes | 0 | X coordinate of the upper left corner of the rectangle, in vp.| 915| y | number | Yes | 0 | Y coordinate of the upper left corner of the rectangle, in vp.| 916| w | number | Yes | 0 | Width of the rectangle, in vp.| 917| h | number | Yes | 0 | Height of the rectangle, in vp.| 918 919**Example** 920 921 ```ts 922 // xxx.ets 923 @Entry 924 @Component 925 struct StrokeRect { 926 private settings: RenderingContextSettings = new RenderingContextSettings(true) 927 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 928 929 build() { 930 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 931 Canvas(this.context) 932 .width('100%') 933 .height('100%') 934 .backgroundColor('#ffff00') 935 .onReady(() =>{ 936 this.context.strokeRect(30, 30, 200, 150) 937 }) 938 } 939 .width('100%') 940 .height('100%') 941 } 942 } 943 ``` 944 945  946 947 948### clearRect 949 950clearRect(x: number, y: number, w: number, h: number): void 951 952Clears the content in a rectangle on the canvas. 953 954Since API version 9, this API is supported in ArkTS widgets. 955 956**Parameters** 957 958| Name | Type | Mandatory | Default Value | Description | 959| ---- | ------ | ---- | ---- | ------------- | 960| x | number | Yes | 0 | X coordinate of the upper left corner of the rectangle, in vp.| 961| y | number | Yes | 0 | X coordinate of the upper left corner of the rectangle, in vp.| 962| w | number | Yes | 0 | Width of the rectangle, in vp.| 963| h | number | Yes | 0 | Height of the rectangle, in vp.| 964 965**Example** 966 967 ```ts 968 // xxx.ets 969 @Entry 970 @Component 971 struct ClearRect { 972 private settings: RenderingContextSettings = new RenderingContextSettings(true) 973 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 974 975 build() { 976 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 977 Canvas(this.context) 978 .width('100%') 979 .height('100%') 980 .backgroundColor('#ffff00') 981 .onReady(() =>{ 982 this.context.fillStyle = 'rgb(0,0,255)' 983 this.context.fillRect(20,20,200,200) 984 this.context.clearRect(30,30,150,100) 985 }) 986 } 987 .width('100%') 988 .height('100%') 989 } 990 } 991 ``` 992 993  994 995 996### fillText 997 998fillText(text: string, x: number, y: number, maxWidth?: number): void 999 1000Draws filled text on the canvas. 1001 1002Since API version 9, this API is supported in ArkTS widgets. 1003 1004**Parameters** 1005 1006| Name | Type | Mandatory | Default Value | Description | 1007| -------- | ------ | ---- | ---- | --------------- | 1008| text | string | Yes | '' | Text to draw. | 1009| x | number | Yes | 0 | X coordinate of the lower left corner of the text, in vp.| 1010| y | number | Yes | 0 | Y coordinate of the lower left corner of the text, in vp.| 1011| maxWidth | number | No | - | Maximum width allowed for the text, in vp.| 1012 1013**Example** 1014 1015 ```ts 1016 // xxx.ets 1017 @Entry 1018 @Component 1019 struct FillText { 1020 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1021 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1022 1023 build() { 1024 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1025 Canvas(this.context) 1026 .width('100%') 1027 .height('100%') 1028 .backgroundColor('#ffff00') 1029 .onReady(() =>{ 1030 this.context.font = '30px sans-serif' 1031 this.context.fillText("Hello World!", 20, 100) 1032 }) 1033 } 1034 .width('100%') 1035 .height('100%') 1036 } 1037 } 1038 ``` 1039 1040  1041 1042 1043### strokeText 1044 1045strokeText(text: string, x: number, y: number, maxWidth?:number): void 1046 1047Draws a text stroke on the canvas. 1048 1049Since API version 9, this API is supported in ArkTS widgets. 1050 1051**Parameters** 1052 1053| Name | Type | Mandatory | Default Value | Description | 1054| -------- | ------ | ---- | ---- | --------------- | 1055| text | string | Yes | '' | Text to draw. | 1056| x | number | Yes | 0 | X coordinate of the lower left corner of the text, in vp.| 1057| y | number | Yes | 0 | Y coordinate of the lower left corner of the text, in vp.| 1058| maxWidth | number | No | - | Maximum width allowed for the text, in vp.| 1059 1060**Example** 1061 1062 ```ts 1063 // xxx.ets 1064 @Entry 1065 @Component 1066 struct StrokeText { 1067 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1068 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1069 1070 build() { 1071 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1072 Canvas(this.context) 1073 .width('100%') 1074 .height('100%') 1075 .backgroundColor('#ffff00') 1076 .onReady(() =>{ 1077 this.context.font = '55px sans-serif' 1078 this.context.strokeText("Hello World!", 20, 60) 1079 }) 1080 } 1081 .width('100%') 1082 .height('100%') 1083 } 1084 } 1085 ``` 1086 1087  1088 1089 1090### measureText 1091 1092measureText(text: string): TextMetrics 1093 1094Measures the specified text to obtain its width. This API returns a **TextMetrics** object. 1095 1096Since API version 9, this API is supported in ArkTS widgets. 1097 1098**Parameters** 1099 1100| Name | Type | Mandatory | Default Value | Description | 1101| ---- | ------ | ---- | ---- | ---------- | 1102| text | string | Yes | '' | Text to be measured.| 1103 1104**Return value** 1105 1106| Type | Description | 1107| ----------- | ---------------------------------------- | 1108| [TextMetrics](#textmetrics) | **TextMetrics** object.<br>Since API version 9, this API is supported in ArkTS widgets.| 1109 1110**Example** 1111 1112 ```ts 1113 // xxx.ets 1114 @Entry 1115 @Component 1116 struct MeasureText { 1117 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1118 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1119 1120 build() { 1121 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1122 Canvas(this.context) 1123 .width('100%') 1124 .height('100%') 1125 .backgroundColor('#ffff00') 1126 .onReady(() =>{ 1127 this.context.font = '50px sans-serif' 1128 this.context.fillText("Hello World!", 20, 100) 1129 this.context.fillText("width:" + this.context.measureText("Hello World!").width, 20, 200) 1130 }) 1131 } 1132 .width('100%') 1133 .height('100%') 1134 } 1135 } 1136 ``` 1137 1138  1139 1140 1141### stroke 1142 1143stroke(path?: Path2D): void 1144 1145Strokes a path. 1146 1147Since API version 9, this API is supported in ArkTS widgets. 1148 1149**Parameters** 1150 1151| Name | Type | Mandatory | Default Value | Description | 1152| ---- | ---------------------------------------- | ---- | ---- | ------------ | 1153| path | [Path2D](ts-components-canvas-path2d.md) | No | null | A **Path2D** path to draw.| 1154 1155**Example** 1156 1157 ```ts 1158 // xxx.ets 1159 @Entry 1160 @Component 1161 struct Stroke { 1162 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1163 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1164 1165 build() { 1166 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1167 Canvas(this.context) 1168 .width('100%') 1169 .height('100%') 1170 .backgroundColor('#ffff00') 1171 .onReady(() =>{ 1172 this.context.moveTo(25, 25) 1173 this.context.lineTo(25, 105) 1174 this.context.lineTo(75, 105) 1175 this.context.lineTo(75, 25) 1176 this.context.strokeStyle = 'rgb(0,0,255)' 1177 this.context.stroke() 1178 }) 1179 } 1180 .width('100%') 1181 .height('100%') 1182 } 1183 } 1184 ``` 1185 1186  1187 1188 1189### beginPath 1190 1191beginPath(): void 1192 1193Creates a drawing path. 1194 1195Since API version 9, this API is supported in ArkTS widgets. 1196 1197**Example** 1198 1199 ```ts 1200 // xxx.ets 1201 @Entry 1202 @Component 1203 struct BeginPath { 1204 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1205 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1206 1207 build() { 1208 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1209 Canvas(this.context) 1210 .width('100%') 1211 .height('100%') 1212 .backgroundColor('#ffff00') 1213 .onReady(() =>{ 1214 this.context.beginPath() 1215 this.context.lineWidth = 6 1216 this.context.strokeStyle = '#0000ff' 1217 this.context.moveTo(15, 80) 1218 this.context.lineTo(280, 160) 1219 this.context.stroke() 1220 }) 1221 } 1222 .width('100%') 1223 .height('100%') 1224 } 1225 } 1226 ``` 1227 1228  1229 1230 1231### moveTo 1232 1233moveTo(x: number, y: number): void 1234 1235Moves a drawing path to a target position on the canvas. 1236 1237Since API version 9, this API is supported in ArkTS widgets. 1238 1239**Parameters** 1240 1241| Name | Type | Mandatory | Default Value | Description | 1242| ---- | ------ | ---- | ---- | --------- | 1243| x | number | Yes | 0 | X coordinate of the target position, in vp.| 1244| y | number | Yes | 0 | Y coordinate of the target position, in vp.| 1245 1246**Example** 1247 1248 ```ts 1249 // xxx.ets 1250 @Entry 1251 @Component 1252 struct MoveTo { 1253 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1254 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1255 1256 build() { 1257 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1258 Canvas(this.context) 1259 .width('100%') 1260 .height('100%') 1261 .backgroundColor('#ffff00') 1262 .onReady(() =>{ 1263 this.context.beginPath() 1264 this.context.moveTo(10, 10) 1265 this.context.lineTo(280, 160) 1266 this.context.stroke() 1267 }) 1268 } 1269 .width('100%') 1270 .height('100%') 1271 } 1272 } 1273 ``` 1274 1275  1276 1277 1278### lineTo 1279 1280lineTo(x: number, y: number): void 1281 1282Connects the current point to a target position using a straight line. 1283 1284Since API version 9, this API is supported in ArkTS widgets. 1285 1286**Parameters** 1287 1288| Name | Type | Mandatory | Default Value | Description | 1289| ---- | ------ | ---- | ---- | --------- | 1290| x | number | Yes | 0 | X coordinate of the target position, in vp.| 1291| y | number | Yes | 0 | Y coordinate of the target position, in vp.| 1292 1293**Example** 1294 1295 ```ts 1296 // xxx.ets 1297 @Entry 1298 @Component 1299 struct LineTo { 1300 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1301 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1302 1303 build() { 1304 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1305 Canvas(this.context) 1306 .width('100%') 1307 .height('100%') 1308 .backgroundColor('#ffff00') 1309 .onReady(() =>{ 1310 this.context.beginPath() 1311 this.context.moveTo(10, 10) 1312 this.context.lineTo(280, 160) 1313 this.context.stroke() 1314 }) 1315 } 1316 .width('100%') 1317 .height('100%') 1318 } 1319 } 1320 ``` 1321 1322  1323 1324 1325### closePath 1326 1327closePath(): void 1328 1329Draws a closed path. 1330 1331Since API version 9, this API is supported in ArkTS widgets. 1332 1333**Example** 1334 1335 ```ts 1336 // xxx.ets 1337 @Entry 1338 @Component 1339 struct ClosePath { 1340 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1341 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1342 1343 build() { 1344 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1345 Canvas(this.context) 1346 .width('100%') 1347 .height('100%') 1348 .backgroundColor('#ffff00') 1349 .onReady(() =>{ 1350 this.context.beginPath() 1351 this.context.moveTo(30, 30) 1352 this.context.lineTo(110, 30) 1353 this.context.lineTo(70, 90) 1354 this.context.closePath() 1355 this.context.stroke() 1356 }) 1357 } 1358 .width('100%') 1359 .height('100%') 1360 } 1361 } 1362 ``` 1363 1364  1365 1366 1367### createPattern 1368 1369createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | null 1370 1371Creates a pattern for image filling based on a specified source image and repetition mode. 1372 1373Since API version 9, this API is supported in ArkTS widgets. 1374 1375**Parameters** 1376 1377| Name | Type | Mandatory | Description | 1378| ---------- | ---------------------------------------- | ---- | ---------------------------------------- | 1379| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Yes | Source image. For details, see **ImageBitmap**. | 1380| repetition | string | Yes | Repetition mode. The value can be **'repeat'**, **'repeat-x'**, **'repeat-y'**, **'no-repeat'**, **'clamp'**, or **'mirror'**.<br>Default value: **''**| 1381 1382**Return value** 1383 1384| Type | Description | 1385| ---------------------------------------- | ----------------------- | 1386| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | Created pattern for image filling based on a specified source image and repetition mode.| 1387 1388**Example** 1389 1390 ```ts 1391 // xxx.ets 1392 @Entry 1393 @Component 1394 struct CreatePattern { 1395 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1396 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1397 private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") 1398 1399 build() { 1400 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1401 Canvas(this.context) 1402 .width('100%') 1403 .height('100%') 1404 .backgroundColor('#ffff00') 1405 .onReady(() =>{ 1406 let pattern = this.context.createPattern(this.img, 'repeat') 1407 if (pattern) { 1408 this.context.fillStyle = pattern 1409 } 1410 this.context.fillRect(0, 0, 200, 200) 1411 }) 1412 } 1413 .width('100%') 1414 .height('100%') 1415 } 1416 } 1417 ``` 1418 1419  1420 1421 1422### bezierCurveTo 1423 1424bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void 1425 1426Draws a cubic Bezier curve on the canvas. 1427 1428Since API version 9, this API is supported in ArkTS widgets. 1429 1430**Parameters** 1431 1432| Name | Type | Mandatory | Default Value | Description | 1433| ---- | ------ | ---- | ---- | -------------- | 1434| cp1x | number | Yes | 0 | X coordinate of the first parameter of the Bezier curve, in vp.| 1435| cp1y | number | Yes | 0 | Y coordinate of the first parameter of the Bezier curve, in vp.| 1436| cp2x | number | Yes | 0 | X coordinate of the second parameter of the Bezier curve, in vp.| 1437| cp2y | number | Yes | 0 | Y coordinate of the second parameter of the Bezier curve, in vp.| 1438| x | number | Yes | 0 | X coordinate of the end point on the Bezier curve, in vp.| 1439| y | number | Yes | 0 | Y coordinate of the end point on the Bezier curve, in vp.| 1440 1441**Example** 1442 1443 ```ts 1444 // xxx.ets 1445 @Entry 1446 @Component 1447 struct BezierCurveTo { 1448 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1449 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1450 1451 build() { 1452 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1453 Canvas(this.context) 1454 .width('100%') 1455 .height('100%') 1456 .backgroundColor('#ffff00') 1457 .onReady(() =>{ 1458 this.context.beginPath() 1459 this.context.moveTo(10, 10) 1460 this.context.bezierCurveTo(20, 100, 200, 100, 200, 20) 1461 this.context.stroke() 1462 }) 1463 } 1464 .width('100%') 1465 .height('100%') 1466 } 1467 } 1468 ``` 1469 1470  1471 1472 1473### quadraticCurveTo 1474 1475quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void 1476 1477Draws a quadratic curve on the canvas. 1478 1479Since API version 9, this API is supported in ArkTS widgets. 1480 1481**Parameters** 1482 1483| Name | Type | Mandatory | Default Value | Description | 1484| ---- | ------ | ---- | ---- | ----------- | 1485| cpx | number | Yes | 0 | X coordinate of the Bezier curve parameter, in vp.| 1486| cpy | number | Yes | 0 | Y coordinate of the Bezier curve parameter, in vp.| 1487| x | number | Yes | 0 | X coordinate of the end point on the Bezier curve, in vp.| 1488| y | number | Yes | 0 | Y coordinate of the end point on the Bezier curve, in vp.| 1489 1490**Example** 1491 1492 ```ts 1493 // xxx.ets 1494 @Entry 1495 @Component 1496 struct QuadraticCurveTo { 1497 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1498 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1499 1500 build() { 1501 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1502 Canvas(this.context) 1503 .width('100%') 1504 .height('100%') 1505 .backgroundColor('#ffff00') 1506 .onReady(() =>{ 1507 this.context.beginPath() 1508 this.context.moveTo(20, 20) 1509 this.context.quadraticCurveTo(100, 100, 200, 20) 1510 this.context.stroke() 1511 }) 1512 } 1513 .width('100%') 1514 .height('100%') 1515 } 1516 } 1517 ``` 1518 1519  1520 1521 1522### arc 1523 1524arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void 1525 1526Draws an arc on the canvas. 1527 1528Since API version 9, this API is supported in ArkTS widgets. 1529 1530**Parameters** 1531 1532| Name | Type | Mandatory | Default Value | Description | 1533| ---------------- | ------- | ---- | ----- | ---------- | 1534| x | number | Yes | 0 | X coordinate of the center point of the arc, in vp.| 1535| y | number | Yes | 0 | Y coordinate of the center point of the arc, in vp.| 1536| radius | number | Yes | 0 | Radius of the arc, in vp.| 1537| startAngle | number | Yes | 0 | Start radian of the arc. | 1538| endAngle | number | Yes | 0 | End radian of the arc. | 1539| counterclockwise | boolean | No | false | Whether to draw the arc counterclockwise.| 1540 1541**Example** 1542 1543 ```ts 1544 // xxx.ets 1545 @Entry 1546 @Component 1547 struct Arc { 1548 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1549 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1550 1551 build() { 1552 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1553 Canvas(this.context) 1554 .width('100%') 1555 .height('100%') 1556 .backgroundColor('#ffff00') 1557 .onReady(() =>{ 1558 this.context.beginPath() 1559 this.context.arc(100, 75, 50, 0, 6.28) 1560 this.context.stroke() 1561 }) 1562 } 1563 .width('100%') 1564 .height('100%') 1565 } 1566 } 1567 ``` 1568 1569  1570 1571 1572### arcTo 1573 1574arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void 1575 1576Draws an arc based on the radius and points on the arc. 1577 1578Since API version 9, this API is supported in ArkTS widgets. 1579 1580**Parameters** 1581 1582| Name | Type | Mandatory | Default Value | Description | 1583| ------ | ------ | ---- | ---- | --------------- | 1584| x1 | number | Yes | 0 | X coordinate of the first point on the arc, in vp.| 1585| y1 | number | Yes | 0 | Y coordinate of the first point on the arc, in vp.| 1586| x2 | number | Yes | 0 | X coordinate of the second point on the arc, in vp.| 1587| y2 | number | Yes | 0 | Y coordinate of the second point on the arc, in vp.| 1588| radius | number | Yes | 0 | Radius of the arc, in vp.| 1589 1590**Example** 1591 1592 ```ts 1593 // xxx.ets 1594 @Entry 1595 @Component 1596 struct ArcTo { 1597 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1598 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1599 1600 build() { 1601 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1602 Canvas(this.context) 1603 .width('100%') 1604 .height('100%') 1605 .backgroundColor('#ffff00') 1606 .onReady(() =>{ 1607 this.context.moveTo(100, 20) 1608 this.context.arcTo(150, 20, 150, 70, 50) 1609 this.context.stroke() 1610 }) 1611 } 1612 .width('100%') 1613 .height('100%') 1614 } 1615 } 1616 ``` 1617 1618  1619 1620 1621### ellipse 1622 1623ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void 1624 1625Draws an ellipse in the specified rectangular region on the canvas. 1626 1627Since API version 9, this API is supported in ArkTS widgets. 1628 1629**Parameters** 1630 1631| Name | Type | Mandatory | Default Value | Description | 1632| ---------------- | ------- | ---- | ----- | ---------------------------------------- | 1633| x | number | Yes | 0 | X coordinate of the ellipse center, in vp.| 1634| y | number | Yes | 0 | Y coordinate of the ellipse center, in vp.| 1635| radiusX | number | Yes | 0 | Ellipse radius on the x-axis, in vp.| 1636| radiusY | number | Yes | 0 | Ellipse radius on the y-axis, in vp.| 1637| rotation | number | Yes | 0 | Rotation angle of the ellipse. The unit is radian. | 1638| startAngle | number | Yes | 0 | Angle of the start point for drawing the ellipse. The unit is radian. | 1639| endAngle | number | Yes | 0 | Angle of the end point for drawing the ellipse. The unit is radian. | 1640| counterclockwise | boolean | No | false | Whether to draw the ellipse in the counterclockwise direction.<br>**true**: Draw the arc counterclockwise.<br>**false**: Draw the arc clockwise.| 1641 1642**Example** 1643 1644 ```ts 1645 // xxx.ets 1646 @Entry 1647 @Component 1648 struct CanvasExample { 1649 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1650 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1651 1652 build() { 1653 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1654 Canvas(this.context) 1655 .width('100%') 1656 .height('100%') 1657 .backgroundColor('#ffff00') 1658 .onReady(() =>{ 1659 this.context.beginPath() 1660 this.context.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI * 2, false) 1661 this.context.stroke() 1662 this.context.beginPath() 1663 this.context.ellipse(200, 300, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI * 2, true) 1664 this.context.stroke() 1665 }) 1666 } 1667 .width('100%') 1668 .height('100%') 1669 } 1670 } 1671 ``` 1672 1673  1674 1675 1676### rect 1677 1678rect(x: number, y: number, w: number, h: number): void 1679 1680Creates a rectangle on the canvas. 1681 1682Since API version 9, this API is supported in ArkTS widgets. 1683 1684**Parameters** 1685 1686| Name | Type | Mandatory | Default Value | Description | 1687| ---- | ------ | ---- | ---- | ------------- | 1688| x | number | Yes | 0 | X coordinate of the upper left corner of the rectangle, in vp.| 1689| y | number | Yes | 0 | Y coordinate of the upper left corner of the rectangle, in vp.| 1690| w | number | Yes | 0 | Width of the rectangle, in vp.| 1691| h | number | Yes | 0 | Height of the rectangle, in vp.| 1692 1693**Example** 1694 1695 ```ts 1696 // xxx.ets 1697 @Entry 1698 @Component 1699 struct CanvasExample { 1700 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1701 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1702 1703 build() { 1704 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1705 Canvas(this.context) 1706 .width('100%') 1707 .height('100%') 1708 .backgroundColor('#ffff00') 1709 .onReady(() =>{ 1710 this.context.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20) 1711 this.context.stroke() 1712 }) 1713 } 1714 .width('100%') 1715 .height('100%') 1716 } 1717 } 1718 ``` 1719 1720  1721 1722 1723### fill 1724 1725fill(fillRule?: CanvasFillRule): void 1726 1727Fills the area inside a closed path on the canvas. 1728 1729Since API version 9, this API is supported in ArkTS widgets. 1730 1731**Parameters** 1732 1733| Name | Type | Mandatory | Default Value | Description | 1734| -------- | -------------- | ---- | --------- | ---------------------------------------- | 1735| fillRule | [CanvasFillRule](ts-canvasrenderingcontext2d.md#canvasfillrule) | No | "nonzero" | Rule by which to determine whether a point is inside or outside the area to fill.<br>The options are **"nonzero"** and **"evenodd"**.| 1736 1737 1738**Example** 1739 1740 ```ts 1741 // xxx.ets 1742 @Entry 1743 @Component 1744 struct Fill { 1745 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1746 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1747 1748 build() { 1749 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1750 Canvas(this.context) 1751 .width('100%') 1752 .height('100%') 1753 .backgroundColor('#ffff00') 1754 .onReady(() =>{ 1755 this.context.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20) 1756 this.context.fill() 1757 }) 1758 } 1759 .width('100%') 1760 .height('100%') 1761 } 1762 } 1763 ``` 1764 1765  1766 1767 1768fill(path: Path2D, fillRule?: CanvasFillRule): void 1769 1770Fills the area inside a closed path on the canvas. 1771 1772Since API version 9, this API is supported in ArkTS widgets. 1773 1774**Parameters** 1775 1776| Name | Type | Mandatory | Default Value | Description | 1777| -------- | -------------- | ---- | --------- | ---------------------------------------- | 1778| path | [Path2D](ts-components-canvas-path2d.md) | Yes | | A **Path2D** path to fill. | 1779| fillRule | [CanvasFillRule](ts-canvasrenderingcontext2d.md#canvasfillrule) | No | "nonzero" | Rule by which to determine whether a point is inside or outside the area to fill.<br>The options are **"nonzero"** and **"evenodd"**.| 1780 1781 1782**Example** 1783 1784```ts 1785// xxx.ets 1786@Entry 1787@Component 1788struct Fill { 1789 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1790 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1791 1792 build() { 1793 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1794 Canvas(this.context) 1795 .width('100%') 1796 .height('100%') 1797 .backgroundColor('#ffff00') 1798 .onReady(() =>{ 1799 let region = new Path2D() 1800 region.moveTo(30, 90) 1801 region.lineTo(110, 20) 1802 region.lineTo(240, 130) 1803 region.lineTo(60, 130) 1804 region.lineTo(190, 20) 1805 region.lineTo(270, 90) 1806 region.closePath() 1807 // Fill path 1808 this.context.fillStyle = '#00ff00' 1809 this.context.fill(region, "evenodd") 1810 }) 1811 } 1812 .width('100%') 1813 .height('100%') 1814 } 1815} 1816``` 1817 1818  1819 1820 1821### clip 1822 1823clip(fillRule?: CanvasFillRule): void 1824 1825Sets the current path to a clipping area. 1826 1827Since API version 9, this API is supported in ArkTS widgets. 1828 1829**Parameters** 1830 1831| Name | Type | Mandatory | Default Value | Description | 1832| -------- | -------------- | ---- | --------- | ---------------------------------------- | 1833| fillRule | [CanvasFillRule](#canvasfillrule) | No | "nonzero" | Rule by which to determine whether a point is inside or outside the area to clip.<br>The options are **"nonzero"** and **"evenodd"**.| 1834 1835**Example** 1836 1837 ```ts 1838 // xxx.ets 1839 @Entry 1840 @Component 1841 struct Clip { 1842 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1843 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1844 1845 build() { 1846 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1847 Canvas(this.context) 1848 .width('100%') 1849 .height('100%') 1850 .backgroundColor('#ffff00') 1851 .onReady(() =>{ 1852 this.context.rect(0, 0, 100, 200) 1853 this.context.stroke() 1854 this.context.clip() 1855 this.context.fillStyle = "rgb(255,0,0)" 1856 this.context.fillRect(0, 0, 200, 200) 1857 }) 1858 } 1859 .width('100%') 1860 .height('100%') 1861 } 1862 } 1863 ``` 1864 1865  1866 1867 1868clip(path: Path2D, fillRule?: CanvasFillRule): void 1869 1870Sets the current path to a clipping path. 1871 1872Since API version 9, this API is supported in ArkTS widgets. 1873 1874**Parameters** 1875 1876| Name | Type | Mandatory | Default Value | Description | 1877| -------- | -------------- | ---- | --------- | ---------------------------------------- | 1878| path | [Path2D](ts-components-canvas-path2d.md) | Yes | - | A **Path2D** path to use as a clipping area. | 1879| fillRule | [CanvasFillRule](#canvasfillrule) | No | "nonzero" | Rule by which to determine whether a point is inside or outside the area to clip.<br>The options are **"nonzero"** and **"evenodd"**.| 1880 1881 1882**Example** 1883 1884 ```ts 1885 // xxx.ets 1886 @Entry 1887 @Component 1888 struct Clip { 1889 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1890 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1891 build() { 1892 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1893 Canvas(this.context) 1894 .width('100%') 1895 .height('100%') 1896 .backgroundColor('#ffff00') 1897 .onReady(() =>{ 1898 let region = new Path2D() 1899 region.moveTo(30, 90) 1900 region.lineTo(110, 20) 1901 region.lineTo(240, 130) 1902 region.lineTo(60, 130) 1903 region.lineTo(190, 20) 1904 region.lineTo(270, 90) 1905 region.closePath() 1906 this.context.clip(region,"evenodd") 1907 this.context.fillStyle = "rgb(0,255,0)" 1908 this.context.fillRect(0, 0, this.context.width, this.context.height) 1909 }) 1910 } 1911 .width('100%') 1912 .height('100%') 1913 } 1914 } 1915 ``` 1916 1917  1918 1919 1920### resetTransform 1921 1922resetTransform(): void 1923 1924Resets the current transform to the identity matrix. This API is a void API. 1925 1926Since API version 9, this API is supported in ArkTS widgets. 1927 1928 1929### rotate 1930 1931rotate(angle: number): void 1932 1933Rotates a canvas clockwise around its coordinate axes. 1934 1935Since API version 9, this API is supported in ArkTS widgets. 1936 1937**Parameters** 1938 1939| Name | Type | Mandatory | Default Value | Description | 1940| ----- | ------ | ---- | ---- | ---------------------------------------- | 1941| angle | number | Yes | 0 | Clockwise rotation angle. You can use **Math.PI / 180** to convert the angle to a radian.| 1942 1943**Example** 1944 1945 ```ts 1946 // xxx.ets 1947 @Entry 1948 @Component 1949 struct Rotate { 1950 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1951 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1952 1953 build() { 1954 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1955 Canvas(this.context) 1956 .width('100%') 1957 .height('100%') 1958 .backgroundColor('#ffff00') 1959 .onReady(() =>{ 1960 this.context.rotate(45 * Math.PI / 180) 1961 this.context.fillRect(70, 20, 50, 50) 1962 }) 1963 } 1964 .width('100%') 1965 .height('100%') 1966 } 1967 } 1968 ``` 1969 1970  1971 1972 1973### scale 1974 1975scale(x: number, y: number): void 1976 1977Scales the canvas based on the given scale factors. 1978 1979Since API version 9, this API is supported in ArkTS widgets. 1980 1981**Parameters** 1982 1983| Name | Type | Mandatory | Default Value | Description | 1984| ---- | ------ | ---- | ---- | ----------- | 1985| x | number | Yes | 0 | Horizontal scale factor.| 1986| y | number | Yes | 0 | Vertical scale factor.| 1987 1988**Example** 1989 1990 ```ts 1991 // xxx.ets 1992 @Entry 1993 @Component 1994 struct Scale { 1995 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1996 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1997 1998 build() { 1999 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2000 Canvas(this.context) 2001 .width('100%') 2002 .height('100%') 2003 .backgroundColor('#ffff00') 2004 .onReady(() =>{ 2005 this.context.lineWidth = 3 2006 this.context.strokeRect(30, 30, 50, 50) 2007 this.context.scale(2, 2) // Scale to 200% 2008 this.context.strokeRect(30, 30, 50, 50) 2009 }) 2010 } 2011 .width('100%') 2012 .height('100%') 2013 } 2014 } 2015 ``` 2016 2017  2018 2019 2020### transform 2021 2022transform(a: number, b: number, c: number, d: number, e: number, f: number): void 2023 2024Defines 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. 2025 2026Since API version 9, this API is supported in ArkTS widgets. 2027 2028> **NOTE** 2029> The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation. 2030> 2031> - x' = scaleX \* x + skewY \* y + translateX 2032> 2033> - y' = skewX \* x + scaleY \* y + translateY 2034 2035**Parameters** 2036 2037| Name | Type | Mandatory | Default Value | Description | 2038| ---- | ------ | ---- | ---- | -------------------- | 2039| a | number | Yes | 0 | X-axis scale. | 2040| b | number | Yes | 0 | X-axis skew. | 2041| c | number | Yes | 0 | Y-axis skew. | 2042| d | number | Yes | 0 | Y-axis scale. | 2043| e | number | Yes | 0 | X-axis translation, in vp.| 2044| f | number | Yes | 0 | Y-axis translation, in vp.| 2045 2046**Example** 2047 2048 ```ts 2049 // xxx.ets 2050 @Entry 2051 @Component 2052 struct Transform { 2053 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2054 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2055 2056 build() { 2057 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2058 Canvas(this.context) 2059 .width('100%') 2060 .height('100%') 2061 .backgroundColor('#ffff00') 2062 .onReady(() =>{ 2063 this.context.fillStyle = 'rgb(0,0,0)' 2064 this.context.fillRect(0, 0, 100, 100) 2065 this.context.transform(1, 0.5, -0.5, 1, 10, 10) 2066 this.context.fillStyle = 'rgb(255,0,0)' 2067 this.context.fillRect(0, 0, 100, 100) 2068 this.context.transform(1, 0.5, -0.5, 1, 10, 10) 2069 this.context.fillStyle = 'rgb(0,0,255)' 2070 this.context.fillRect(0, 0, 100, 100) 2071 }) 2072 } 2073 .width('100%') 2074 .height('100%') 2075 } 2076 } 2077 ``` 2078 2079  2080 2081 2082### setTransform 2083 2084setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void 2085 2086Resets the existing transformation matrix and creates a new transformation matrix by using the same parameters as the **transform()** API. 2087 2088Since API version 9, this API is supported in ArkTS widgets. 2089 2090**Parameters** 2091 2092| Name | Type | Mandatory | Default Value | Description | 2093| ---- | ------ | ---- | ---- | -------------------- | 2094| a | number | Yes | 0 | X-axis scale. | 2095| b | number | Yes | 0 | X-axis skew. | 2096| c | number | Yes | 0 | Y-axis skew. | 2097| d | number | Yes | 0 | Y-axis scale. | 2098| e | number | Yes | 0 | X-axis translation, in vp.| 2099| f | number | Yes | 0 | Y-axis translation, in vp.| 2100 2101**Example** 2102 2103 ```ts 2104 // xxx.ets 2105 @Entry 2106 @Component 2107 struct SetTransform { 2108 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2109 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2110 2111 build() { 2112 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2113 Canvas(this.context) 2114 .width('100%') 2115 .height('100%') 2116 .backgroundColor('#ffff00') 2117 .onReady(() =>{ 2118 this.context.fillStyle = 'rgb(255,0,0)' 2119 this.context.fillRect(0, 0, 100, 100) 2120 this.context.setTransform(1,0.5, -0.5, 1, 10, 10) 2121 this.context.fillStyle = 'rgb(0,0,255)' 2122 this.context.fillRect(0, 0, 100, 100) 2123 }) 2124 } 2125 .width('100%') 2126 .height('100%') 2127 } 2128 } 2129 ``` 2130 2131  2132 2133### setTransform 2134 2135setTransform(transform?: Matrix2D): void 2136 2137Resets the current transformation to the identity matrix, and then creates a new transformation matrix based on the specified **Matrix2D** object. 2138 2139Since API version 9, this API is supported in ArkTS widgets. 2140 2141**Parameters** 2142 2143| Name | Type | Mandatory | Default Value | Description | 2144| --------- | ---------------------------------------- | ---- | ---- | ----- | 2145| transform | [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | No | null | Transformation matrix.| 2146 2147**Example** 2148 2149 ```ts 2150 // xxx.ets 2151 @Entry 2152 @Component 2153 struct TransFormDemo { 2154 private settings: RenderingContextSettings = new RenderingContextSettings(true); 2155 private context1: CanvasRenderingContext2D = new CanvasRenderingContext2D(this. settings); 2156 private context2: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2157 2158 build() { 2159 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2160 Text('context1'); 2161 Canvas(this.context1) 2162 .width('230vp') 2163 .height('160vp') 2164 .backgroundColor('#ffff00') 2165 .onReady(() =>{ 2166 this.context1.fillRect(100, 20, 50, 50); 2167 this.context1.setTransform(1, 0.5, -0.5, 1, 10, 10); 2168 this.context1.fillRect(100, 20, 50, 50); 2169 }) 2170 Text('context2'); 2171 Canvas(this.context2) 2172 .width('230vp') 2173 .height('160vp') 2174 .backgroundColor('#0ffff0') 2175 .onReady(() =>{ 2176 this.context2.fillRect(100, 20, 50, 50); 2177 let storedTransform = this.context1.getTransform(); 2178 this.context2.setTransform(storedTransform); 2179 this.context2.fillRect(100, 20, 50, 50); 2180 }) 2181 } 2182 .width('100%') 2183 .height('100%') 2184 } 2185 } 2186 ``` 2187 2188  2189 2190### getTransform 2191 2192getTransform(): Matrix2D 2193 2194Obtains the current transformation matrix being applied to the context. 2195 2196Since API version 9, this API is supported in ArkTS widgets. 2197 2198**Return value** 2199 2200| Type | Description | 2201| ---------------------------------------- | ----- | 2202| [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | **Matrix2D** object.| 2203 2204**Example** 2205 2206 ```ts 2207 // xxx.ets 2208 @Entry 2209 @Component 2210 struct TransFormDemo { 2211 private settings: RenderingContextSettings = new RenderingContextSettings(true); 2212 private context1: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2213 private context2: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2214 2215 build() { 2216 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2217 Text('context1'); 2218 Canvas(this.context1) 2219 .width('230vp') 2220 .height('120vp') 2221 .backgroundColor('#ffff00') 2222 .onReady(() =>{ 2223 this.context1.fillRect(50, 50, 50, 50); 2224 this.context1.setTransform(1.2, Math.PI/8, Math.PI/6, 0.5, 30, -25); 2225 this.context1.fillRect(50, 50, 50, 50); 2226 }) 2227 Text('context2'); 2228 Canvas(this.context2) 2229 .width('230vp') 2230 .height('120vp') 2231 .backgroundColor('#0ffff0') 2232 .onReady(() =>{ 2233 this.context2.fillRect(50, 50, 50, 50); 2234 let storedTransform = this.context1.getTransform(); 2235 console.log("Matrix [scaleX = " + storedTransform.scaleX + ", scaleY = " + storedTransform.scaleY + 2236 ", rotateX = " + storedTransform.rotateX + ", rotateY = " + storedTransform.rotateY + 2237 ", translateX = " + storedTransform.translateX + ", translateY = " + storedTransform.translateY + "]") 2238 this.context2.setTransform(storedTransform); 2239 this.context2.fillRect(50,50,50,50); 2240 }) 2241 } 2242 .width('100%') 2243 .height('100%') 2244 } 2245 } 2246 ``` 2247 2248  2249 2250### translate 2251 2252translate(x: number, y: number): void 2253 2254Moves the origin of the coordinate system. 2255 2256Since API version 9, this API is supported in ArkTS widgets. 2257 2258**Parameters** 2259 2260| Name | Type | Mandatory | Default Value | Description | 2261| ---- | ------ | ---- | ---- | -------- | 2262| x | number | Yes | 0 | X-axis translation, in vp.| 2263| y | number | Yes | 0 | Y-axis translation, in vp.| 2264 2265**Example** 2266 2267 ```ts 2268 // xxx.ets 2269 @Entry 2270 @Component 2271 struct Translate { 2272 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2273 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2274 2275 build() { 2276 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2277 Canvas(this.context) 2278 .width('100%') 2279 .height('100%') 2280 .backgroundColor('#ffff00') 2281 .onReady(() =>{ 2282 this.context.fillRect(10, 10, 50, 50) 2283 this.context.translate(70, 70) 2284 this.context.fillRect(10, 10, 50, 50) 2285 }) 2286 } 2287 .width('100%') 2288 .height('100%') 2289 } 2290 } 2291 ``` 2292 2293  2294 2295 2296### drawImage 2297 2298drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number): void 2299 2300drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number, dw: number, dh: number): void 2301 2302drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number):void 2303 2304Draws an image on the canvas. 2305 2306Since API version 9, this API is supported in ArkTS widgets, except that **PixelMap** objects are not supported. 2307 2308**Parameters** 2309 2310| Name | Type | Mandatory | Default Value | Description | 2311| ----- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | 2312| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) or [PixelMap](../apis/js-apis-image.md#pixelmap7)| Yes | null | Image resource. For details, see **ImageBitmap** or PixelMap. | 2313| sx | number | No | 0 | X coordinate of the upper left corner of the rectangle used to crop the source image, in vp.| 2314| sy | number | No | 0 | Y coordinate of the upper left corner of the rectangle used to crop the source image, in vp.| 2315| sw | number | No | 0 | Target width by which the source image is cropped, in vp.| 2316| sh | number | No | 0 | Target height by which the source image is cropped, in vp.| 2317| dx | number | Yes | 0 | X coordinate of the upper left corner of the drawing area on the canvas, in vp.| 2318| dy | number | Yes | 0 | Y coordinate of the upper left corner of the drawing area on the canvas, in vp.| 2319| dw | number | No | 0 | Width of the drawing area. If the width of the drawing area is different from that of the cropped image, the latter will be stretched or compressed to the former.<br>Unit: vp| 2320| dh | number | No | 0 | Height of the drawing area. If the height of the drawing area is different from that of the cropped image, the latter will be stretched or compressed to the former.<br>Unit: vp| 2321 2322 2323**Example** 2324 2325 ```ts 2326 // xxx.ets 2327 @Entry 2328 @Component 2329 struct ImageExample { 2330 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2331 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2332 private img:ImageBitmap = new ImageBitmap("common/images/example.jpg") 2333 2334 build() { 2335 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2336 Canvas(this.context) 2337 .width('100%') 2338 .height('100%') 2339 .backgroundColor('#ffff00') 2340 .onReady(() =>{ 2341 this.context.drawImage( this.img,0,0,500,500,0,0,400,200) 2342 }) 2343 } 2344 .width('100%') 2345 .height('100%') 2346 } 2347 } 2348 ``` 2349 2350  2351 2352 2353### createImageData 2354 2355createImageData(sw: number, sh: number): ImageData 2356 2357Creates an **ImageData** object with the same width and height of the current **ImageData** object. For details, see [ImageData](ts-components-canvas-imagedata.md). The example is the same as that of **putImageData**. 2358 2359Since API version 9, this API is supported in ArkTS widgets. 2360 2361**Parameters** 2362 2363| Name | Type | Mandatory | Default Value | Description | 2364| ---- | ------ | ---- | ---- | ------------- | 2365| sw | number | Yes | 0 | Width of the **ImageData** object, in vp.| 2366| sh | number | Yes | 0 | Height of the **ImageData** object, in vp.| 2367 2368 2369createImageData(imageData: ImageData): ImageData 2370 2371Creates an **[ImageData](ts-components-canvas-imagedata.md)** object. The example is the same as that of **putImageData**. 2372 2373Since API version 9, this API is supported in ArkTS widgets. 2374 2375**Parameters** 2376 2377| Name | Type | Mandatory | Default Value | Description | 2378| --------- | ---------------------------------------- | ---- | ---- | ----------------- | 2379| imagedata | [ImageData](ts-components-canvas-imagedata.md) | Yes | null | **ImageData** object with the same width and height copied from the original **ImageData** object.| 2380 2381 **Return value** 2382 2383| Type | Description | 2384| ---------------------------------------- | -------------- | 2385| [ImageData](ts-components-canvas-imagedata.md) | New **ImageData** object.| 2386 2387 2388### getPixelMap 2389 2390getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap 2391 2392Obtains the [PixelMap](../apis/js-apis-image.md#pixelmap7) object created with the pixels within the specified area on the canvas. This API involves time-consuming memory copy. Therefore, avoid frequent calls to it. 2393 2394**Parameters** 2395 2396| Name | Type | Mandatory | Default Value | Description | 2397| ---- | ------ | ---- | ---- | --------------- | 2398| sx | number | Yes | 0 | X coordinate of the upper left corner of the output area, in vp.| 2399| sy | number | Yes | 0 | Y coordinate of the upper left corner of the output area, in vp.| 2400| sw | number | Yes | 0 | Width of the output area, in vp.| 2401| sh | number | Yes | 0 | Height of the output area, in vp.| 2402 2403**Return value** 2404 2405| Type | Description | 2406| ---------------------------------------- | ------------- | 2407| [PixelMap](../apis/js-apis-image.md#pixelmap7) | **PixelMap** object.| 2408 2409**Example** 2410 2411 ```ts 2412 // xxx.ets 2413 @Entry 2414 @Component 2415 struct GetPixelMap { 2416 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2417 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2418 private img:ImageBitmap = new ImageBitmap("/images/star.png") 2419 2420 build() { 2421 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2422 Canvas(this.context) 2423 .width('100%') 2424 .height('100%') 2425 .backgroundColor('#ffff00') 2426 .onReady(() =>{ 2427 this.context.drawImage(this.img,0,0,130,130) 2428 let pixelmap = this.context.getPixelMap(50,50,130,130) 2429 this.context.drawImage(pixelmap,150,150) 2430 }) 2431 } 2432 .width('100%') 2433 .height('100%') 2434 } 2435 } 2436 ``` 2437 2438  2439 2440### getImageData 2441 2442getImageData(sx: number, sy: number, sw: number, sh: number): ImageData 2443 2444Obtains the [ImageData](ts-components-canvas-imagedata.md) object created with the pixels within the specified area on the canvas. This API involves time-consuming memory copy. Therefore, avoid frequent calls to it. 2445 2446Since API version 9, this API is supported in ArkTS widgets. 2447 2448**Parameters** 2449 2450| Name | Type | Mandatory | Default Value | Description | 2451| ---- | ------ | ---- | ---- | --------------- | 2452| sx | number | Yes | 0 | X coordinate of the upper left corner of the output area, in vp.| 2453| sy | number | Yes | 0 | Y coordinate of the upper left corner of the output area, in vp.| 2454| sw | number | Yes | 0 | Width of the output area, in vp.| 2455| sh | number | Yes | 0 | Height of the output area, in vp.| 2456 2457 **Return value** 2458 2459| Type | Description | 2460| ---------------------------------------- | -------------- | 2461| [ImageData](ts-components-canvas-imagedata.md) | New **ImageData** object.| 2462 2463 2464**Example** 2465 2466 ```ts 2467 // xxx.ets 2468 @Entry 2469 @Component 2470 struct GetImageData { 2471 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2472 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2473 private img:ImageBitmap = new ImageBitmap("/common/images/1234.png") 2474 2475 build() { 2476 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2477 Canvas(this.context) 2478 .width('100%') 2479 .height('100%') 2480 .backgroundColor('#ffff00') 2481 .onReady(() =>{ 2482 this.context.drawImage(this.img,0,0,130,130) 2483 let imagedata = this.context.getImageData(50,50,130,130) 2484 this.context.putImageData(imagedata,150,150) 2485 }) 2486 } 2487 .width('100%') 2488 .height('100%') 2489 } 2490 } 2491 ``` 2492 2493  2494 2495 2496### putImageData 2497 2498putImageData(imageData: ImageData, dx: number | string, dy: number | string): void 2499 2500putImageData(imageData: ImageData, dx: number | string, dy: number | string, dirtyX: number | string, dirtyY: number | string, dirtyWidth: number | string, dirtyHeight: number | string): void 2501 2502Puts an **[ImageData](ts-components-canvas-imagedata.md)** object onto a rectangular area on the canvas. 2503 2504Since API version 9, this API is supported in ArkTS widgets. 2505 2506**Parameters** 2507 2508| Name | Type | Mandatory | Default Value | Description | 2509| ----------- | ---------------------------------------- | ---- | ------------ | ----------------------------- | 2510| imagedata | [ImageData](ts-components-canvas-imagedata.md) | Yes | null | **ImageData** object with pixels to put onto the canvas.| 2511| dx | number \| string<sup>10+</sup> | Yes | 0 | X-axis offset of the rectangular area on the canvas, in vp.| 2512| dy | number \| string<sup>10+</sup> | Yes | 0 | Y-axis offset of the rectangular area on the canvas, in vp.| 2513| dirtyX | number \| string<sup>10+</sup> | No | 0 | X-axis offset of the upper left corner of the rectangular area relative to that of the source image, in vp.| 2514| dirtyY | number \| string<sup>10+</sup> | No | 0 | Y-axis offset of the upper left corner of the rectangular area relative to that of the source image, in vp.| 2515| dirtyWidth | number \| string<sup>10+</sup> | No | Width of the **ImageData** object| Width of the rectangular area by which the source image is cropped, in vp.| 2516| dirtyHeight | number \| string<sup>10+</sup> | No | Height of the **ImageData** object| Height of the rectangular area by which the source image is cropped, in vp.| 2517 2518**Example** 2519 2520 ```ts 2521 // xxx.ets 2522 @Entry 2523 @Component 2524 struct PutImageData { 2525 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2526 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2527 2528 build() { 2529 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2530 Canvas(this.context) 2531 .width('100%') 2532 .height('100%') 2533 .backgroundColor('#ffff00') 2534 .onReady(() =>{ 2535 let imageDataNum = this.context.createImageData(100, 100) 2536 for (let i = 0; i < imageDataNum.data.length; i += 4) { 2537 imageDataNum.data[i + 0] = 255 2538 imageDataNum.data[i + 1] = 0 2539 imageDataNum.data[i + 2] = 255 2540 imageDataNum.data[i + 3] = 255 2541 } 2542 let imageData = this.context.createImageData(imageDataNum) 2543 this.context.putImageData(imageData, 10, 10) 2544 }) 2545 } 2546 .width('100%') 2547 .height('100%') 2548 } 2549 } 2550 ``` 2551 2552  2553 2554 2555### setLineDash 2556 2557setLineDash(segments: number[]): void 2558 2559Sets the dash line style. 2560 2561Since API version 9, this API is supported in ArkTS widgets. 2562 2563**Parameters** 2564 2565| Name | Type | Description | 2566| -------- | -------- | ------------------- | 2567| segments | number[] | An array of numbers that specify distances, in vp, to alternately draw a line and a gap.| 2568 2569**Example** 2570 2571 ```ts 2572 // xxx.ets 2573 @Entry 2574 @Component 2575 struct SetLineDash { 2576 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2577 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2578 2579 build() { 2580 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2581 Canvas(this.context) 2582 .width('100%') 2583 .height('100%') 2584 .backgroundColor('#ffff00') 2585 .onReady(() =>{ 2586 this.context.arc(100, 75, 50, 0, 6.28) 2587 this.context.setLineDash([10,20]) 2588 this.context.stroke() 2589 }) 2590 } 2591 .width('100%') 2592 .height('100%') 2593 } 2594 } 2595 ``` 2596 2597  2598 2599 2600### getLineDash 2601 2602getLineDash(): number[] 2603 2604Obtains the dash line style. 2605 2606Since API version 9, this API is supported in ArkTS widgets. 2607 2608**Return value** 2609 2610| Type | Description | 2611| -------- | ------------------------ | 2612| number[] | An array of numbers that specify distances, in vp, to alternately draw a line and a gap.| 2613 2614 2615**Example** 2616 2617 ```ts 2618 // xxx.ets 2619 @Entry 2620 @Component 2621 struct CanvasGetLineDash { 2622 @State message: string = 'Hello World' 2623 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2624 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2625 2626 build() { 2627 Row() { 2628 Column() { 2629 Text(this.message) 2630 .fontSize(50) 2631 .fontWeight(FontWeight.Bold) 2632 .onClick(()=>{ 2633 console.error('before getlinedash clicked') 2634 let res = this.context.getLineDash() 2635 console.error(JSON.stringify(res)) 2636 }) 2637 Canvas(this.context) 2638 .width('100%') 2639 .height('100%') 2640 .backgroundColor('#ffff00') 2641 .onReady(() => { 2642 this.context.arc(100, 75, 50, 0, 6.28) 2643 this.context.setLineDash([10,20]) 2644 this.context.stroke() 2645 }) 2646 } 2647 .width('100%') 2648 } 2649 .height('100%') 2650 } 2651 } 2652 ``` 2653 2654 2655 2656### transferFromImageBitmap 2657 2658transferFromImageBitmap(bitmap: ImageBitmap): void 2659 2660Displays the specified **ImageBitmap** object. 2661 2662Since API version 9, this API is supported in ArkTS widgets. 2663 2664**Parameters** 2665 2666| Name | Type | Description | 2667| ------ | ---------------------------------------- | ------------------ | 2668| bitmap | [ImageBitmap](ts-components-canvas-imagebitmap.md) | **ImageBitmap** object to display.| 2669 2670**Example** 2671 2672 ```ts 2673 // xxx.ets 2674 @Entry 2675 @Component 2676 struct TransferFromImageBitmap { 2677 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2678 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2679 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 2680 2681 build() { 2682 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2683 Canvas(this.context) 2684 .width('100%') 2685 .height('100%') 2686 .backgroundColor('#ffff00') 2687 .onReady(() =>{ 2688 let imageData = this.offContext.createImageData(100, 100) 2689 for (let i = 0; i < imageData.data.length; i += 4) { 2690 imageData.data[i + 0] = 255 2691 imageData.data[i + 1] = 0 2692 imageData.data[i + 2] = 255 2693 imageData.data[i + 3] = 255 2694 } 2695 this.offContext.putImageData(imageData, 10, 10) 2696 let image = this.offContext.transferToImageBitmap() 2697 this.context.transferFromImageBitmap(image) 2698 }) 2699 } 2700 .width('100%') 2701 .height('100%') 2702 } 2703 } 2704 ``` 2705  2706 2707 2708### toDataURL 2709 2710toDataURL(type?: string, quality?: number): string 2711 2712Generates a URL containing image display information. 2713 2714Since API version 9, this API is supported in ArkTS widgets. 2715 2716**Parameters** 2717 2718| Name | Type | Mandatory | Default Value | Description | 2719| ------- | ------ | ---- | ----------- | ---------------------------------------- | 2720| type | string | No | "image/png" | Image format. The default value is **image/png**. | 2721| quality | number | No | 0.92 | Image quality, which ranges from 0 to 1, when the image format is **image/jpeg** or **image/webp**. If the set value is beyond the value range, the default value **0.92** is used.| 2722 2723**Return value** 2724 2725| Type | Description | 2726| ------ | --------- | 2727| string | Image URL.| 2728 2729**Example** 2730 2731 ```ts 2732 // xxx.ets 2733 @Entry 2734 @Component 2735 struct CanvasExample { 2736 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2737 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2738 @State toDataURL: string = "" 2739 2740 build() { 2741 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2742 Canvas(this.context) 2743 .width(100) 2744 .height(100) 2745 .onReady(() =>{ 2746 this.context.fillStyle = "#00ff00" 2747 this.context.fillRect(0,0,100,100) 2748 this.toDataURL = this.context.toDataURL("image/png", 0.92) 2749 }) 2750 Text(this.toDataURL) 2751 } 2752 .width('100%') 2753 .height('100%') 2754 .backgroundColor('#ffff00') 2755 } 2756 } 2757 ``` 2758  2759 2760 2761### restore 2762 2763restore(): void 2764 2765Restores the saved drawing context. 2766 2767Since API version 9, this API is supported in ArkTS widgets. 2768 2769**Example** 2770 2771 ```ts 2772 // xxx.ets 2773 @Entry 2774 @Component 2775 struct CanvasExample { 2776 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2777 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2778 2779 build() { 2780 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2781 Canvas(this.context) 2782 .width('100%') 2783 .height('100%') 2784 .backgroundColor('#ffff00') 2785 .onReady(() =>{ 2786 this.context.save() // save the default state 2787 this.context.fillStyle = "#00ff00" 2788 this.context.fillRect(20, 20, 100, 100) 2789 this.context.restore() // restore to the default state 2790 this.context.fillRect(150, 75, 100, 100) 2791 }) 2792 } 2793 .width('100%') 2794 .height('100%') 2795 } 2796 } 2797 ``` 2798  2799 2800 2801### save 2802 2803save(): void 2804 2805Saves all states of the canvas in the stack. This API is usually called when the drawing state needs to be saved. 2806 2807Since API version 9, this API is supported in ArkTS widgets. 2808 2809**Example** 2810 2811 ```ts 2812 // xxx.ets 2813 @Entry 2814 @Component 2815 struct CanvasExample { 2816 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2817 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2818 2819 build() { 2820 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2821 Canvas(this.context) 2822 .width('100%') 2823 .height('100%') 2824 .backgroundColor('#ffff00') 2825 .onReady(() =>{ 2826 this.context.save() // save the default state 2827 this.context.fillStyle = "#00ff00" 2828 this.context.fillRect(20, 20, 100, 100) 2829 this.context.restore() // restore to the default state 2830 this.context.fillRect(150, 75, 100, 100) 2831 }) 2832 } 2833 .width('100%') 2834 .height('100%') 2835 } 2836 } 2837 ``` 2838  2839 2840 2841### createLinearGradient 2842 2843createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient 2844 2845Creates a linear gradient. 2846 2847Since API version 9, this API is supported in ArkTS widgets. 2848 2849**Parameters** 2850 2851| Name | Type | Mandatory | Default Value | Description | 2852| ---- | ------ | ---- | ---- | -------- | 2853| x0 | number | Yes | 0 | X coordinate of the start point, in vp.| 2854| y0 | number | Yes | 0 | Y coordinate of the start point, in vp.| 2855| x1 | number | Yes | 0 | X coordinate of the end point, in vp.| 2856| y1 | number | Yes | 0 | Y coordinate of the end point, in vp.| 2857 2858**Return value** 2859 2860| Type | Description | 2861| ------ | --------- | 2862| [CanvasGradient](ts-components-canvas-canvasgradient.md) | New **CanvasGradient** object used to create a gradient on the canvas.| 2863 2864**Example** 2865 2866 ```ts 2867 // xxx.ets 2868 @Entry 2869 @Component 2870 struct CreateLinearGradient { 2871 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2872 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2873 2874 build() { 2875 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2876 Canvas(this.context) 2877 .width('100%') 2878 .height('100%') 2879 .backgroundColor('#ffff00') 2880 .onReady(() =>{ 2881 let grad = this.context.createLinearGradient(50,0, 300,100) 2882 grad.addColorStop(0.0, '#ff0000') 2883 grad.addColorStop(0.5, '#ffffff') 2884 grad.addColorStop(1.0, '#00ff00') 2885 this.context.fillStyle = grad 2886 this.context.fillRect(0, 0, 400, 400) 2887 }) 2888 } 2889 .width('100%') 2890 .height('100%') 2891 } 2892 } 2893 ``` 2894 2895  2896 2897 2898### createRadialGradient 2899 2900createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient 2901 2902Creates a linear gradient. 2903 2904Since API version 9, this API is supported in ArkTS widgets. 2905 2906**Parameters** 2907 2908| Name | Type | Mandatory | Default Value | Description | 2909| ---- | ------ | ---- | ---- | ----------------- | 2910| x0 | number | Yes | 0 | X coordinate of the center of the start circle, in vp.| 2911| y0 | number | Yes | 0 | Y coordinate of the center of the start circle, in vp.| 2912| r0 | number | Yes | 0 | Radius of the start circle, in vp. The value must be a non-negative finite number.| 2913| x1 | number | Yes | 0 | X coordinate of the center of the end circle, in vp.| 2914| y1 | number | Yes | 0 | Y coordinate of the center of the end circle, in vp.| 2915| r1 | number | Yes | 0 | Radius of the end circle, in vp. The value must be a non-negative finite number.| 2916 2917**Return value** 2918 2919| Type | Description | 2920| ------ | --------- | 2921| [CanvasGradient](ts-components-canvas-canvasgradient.md) | New **CanvasGradient** object used to create a gradient on the canvas.| 2922 2923**Example** 2924 2925 ```ts 2926 // xxx.ets 2927 @Entry 2928 @Component 2929 struct CreateRadialGradient { 2930 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2931 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2932 2933 build() { 2934 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2935 Canvas(this.context) 2936 .width('100%') 2937 .height('100%') 2938 .backgroundColor('#ffff00') 2939 .onReady(() =>{ 2940 let grad = this.context.createRadialGradient(200,200,50, 200,200,200) 2941 grad.addColorStop(0.0, '#ff0000') 2942 grad.addColorStop(0.5, '#ffffff') 2943 grad.addColorStop(1.0, '#00ff00') 2944 this.context.fillStyle = grad 2945 this.context.fillRect(0, 0, 440, 440) 2946 }) 2947 } 2948 .width('100%') 2949 .height('100%') 2950 } 2951 } 2952 ``` 2953 2954  2955 2956### createConicGradient<sup>10+</sup> 2957 2958createConicGradient(startAngle: number, x: number, y: number): CanvasGradient 2959 2960Creates a conic gradient. 2961 2962**Parameters** 2963 2964| Name | Type | Mandatory | Default Value | Description | 2965| ---------- | ------ | ---- | ---- | ----------------------------------- | 2966| startAngle | number | Yes | 0 | Angle at which the gradient starts, in radians. The angle measurement starts horizontally from the right side of the center and moves clockwise.| 2967| x | number | Yes | 0 | X coordinate of the center of the conic gradient, in vp.| 2968| y | number | Yes | 0 | Y coordinate of the center of the conic gradient, in vp.| 2969 2970**Return value** 2971 2972| Type | Description | 2973| ------ | --------- | 2974| [CanvasGradient](ts-components-canvas-canvasgradient.md) | New **CanvasGradient** object used to create a gradient on the canvas.| 2975 2976**Example** 2977 2978```ts 2979// xxx.ets 2980@Entry 2981@Component 2982struct CanvasExample { 2983 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2984 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2985 2986 build() { 2987 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2988 Canvas(this.context) 2989 .width('100%') 2990 .height('100%') 2991 .backgroundColor('#ffffff') 2992 .onReady(() => { 2993 let grad = this.context.createConicGradient(0, 50, 80) 2994 grad.addColorStop(0.0, '#ff0000') 2995 grad.addColorStop(0.5, '#ffffff') 2996 grad.addColorStop(1.0, '#00ff00') 2997 this.context.fillStyle = grad 2998 this.context.fillRect(0, 30, 100, 100) 2999 }) 3000 } 3001 .width('100%') 3002 .height('100%') 3003 } 3004} 3005``` 3006 3007  3008 3009 3010## CanvasDirection 3011 3012Since API version 9, this API is supported in ArkTS widgets. 3013 3014| Name | Description | 3015| ------- | ------------------- | 3016| inherit | The text direction is inherited from the **\<Canvas>** component.| 3017| ltr | The text direction is from left to right. | 3018| rtl | The text direction is from right to left. | 3019 3020## CanvasFillRule 3021 3022Since API version 9, this API is supported in ArkTS widgets. 3023 3024| Name | Description | 3025| ------- | ----- | 3026| evenodd | The inside part of a shape is determined based on whether the counting result is an odd number or not.| 3027| nonzero | The inside part of a shape is determined based on whether the counting result is zero or not.| 3028 3029## CanvasLineCap 3030 3031Since API version 9, this API is supported in ArkTS widgets. 3032 3033| Name | Description | 3034| ------ | ----------------------------- | 3035| butt | The ends of the line are squared off, and the line does not extend beyond its two endpoints. | 3036| round | The line is extended at the endpoints by a half circle whose diameter is equal to the line width. | 3037| square | The line is extended at the endpoints by a rectangle whose width is equal to half the line width and height equal to the line width.| 3038 3039## CanvasLineJoin 3040 3041Since API version 9, this API is supported in ArkTS widgets. 3042 3043| Name | Description | 3044| ----- | ---------------------------------------- | 3045| bevel | The intersection is a triangle. The rectangular corner of each line is independent. | 3046| miter | 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 **miterLimit**.| 3047| round | The intersection is a sector, whose radius at the rounded corner is equal to the line width. | 3048 3049## CanvasTextAlign 3050 3051Since API version 9, this API is supported in ArkTS widgets. 3052 3053| Name | Description | 3054| ------ | ------------ | 3055| center | The text is center-aligned. | 3056| start | The text is aligned with the start bound.| 3057| end | The text is aligned with the end bound.| 3058| left | The text is left-aligned. | 3059| right | The text is right-aligned. | 3060 3061## CanvasTextBaseline 3062 3063Since API version 9, this API is supported in ArkTS widgets. 3064 3065| Name | Description | 3066| ----------- | ---------------------------------------- | 3067| alphabetic | The text baseline is the normal alphabetic baseline. | 3068| bottom | 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.| 3069| hanging | The text baseline is a hanging baseline over the text. | 3070| ideographic | 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.| 3071| middle | The text baseline is in the middle of the text bounding box. | 3072| top | The text baseline is on the top of the text bounding box. | 3073 3074## ImageSmoothingQuality 3075 3076Since API version 9, this API is supported in ArkTS widgets. 3077 3078| Name | Description | 3079| ------ | ---- | 3080| low | Low quality. | 3081| medium | Medium quality. | 3082| high | High quality. | 3083 3084## TextMetrics 3085 3086| Attribute | Type | Description | 3087| ------------------------ | ------ | ---------------------------------------- | 3088| width | number | Width of the text. Read-only. | 3089| height | number | Height of the text. Read-only. | 3090| actualBoundingBoxAscent | number | Distance from the horizontal line specified by the [CanvasRenderingContext2D.textBaseline](#canvastextbaseline) attribute to the top of the bounding rectangle used to render the text. Read-only. The current value is **0**.| 3091| actualBoundingBoxDescent | number | Distance from the horizontal line specified by the [CanvasRenderingContext2D.textBaseline](#canvastextbaseline) attribute to the bottom of the bounding rectangle used to render the text. Read-only. The current value is **0**.| 3092| actualBoundingBoxLeft | number | Distance parallel to the baseline from the alignment point determined by the [CanvasRenderingContext2D.textAlign](#canvastextalign) attribute to the left side of the bounding rectangle of the text. Read-only. The current value is **0**.| 3093| actualBoundingBoxRight | number | Distance parallel to the baseline from the alignment point determined by the [CanvasRenderingContext2D.textAlign](#canvastextalign) attribute to the right side of the bounding rectangle of the text. Read-only. The current value is **0**.| 3094| alphabeticBaseline | number | Distance from the horizontal line specified by the [CanvasRenderingContext2D.textBaseline](#canvastextbaseline) attribute to the alphabetic baseline of the line box. The current value is **0**. Read-only. The current value is **0**.| 3095| emHeightAscent | number | Distance from the horizontal line specified by the [CanvasRenderingContext2D.textBaseline](#canvastextbaseline) attribute to the top of the em square in the line box. The current value is **0**. Read-only. The current value is **0**.| 3096| emHeightDescent | number | Distance from the horizontal line specified by the [CanvasRenderingContext2D.textBaseline](#canvastextbaseline) attribute to the bottom of the em square in the line box. The current value is **0**. Read-only. The current value is **0**.| 3097| fontBoundingBoxAscent | number | Distance from the horizontal line specified by the [CanvasRenderingContext2D.textBaseline](#canvastextbaseline) attribute to the top of the highest bounding rectangle of all the fonts used to render the text. Read-only. The current value is **0**.| 3098| fontBoundingBoxDescent | number | Distance from the horizontal line specified by the [CanvasRenderingContext2D.textBaseline](#canvastextbaseline) attribute to the bottom of the bounding rectangle of all the fonts used to render the text. Read-only. The current value is **0**.| 3099| hangingBaseline | number | Distance from the horizontal line specified by the [CanvasRenderingContext2D.textBaseline](#canvastextbaseline) attribute to the hanging baseline of the line box. Read-only. The current value is **0**.| 3100| ideographicBaseline | number | Distance from the horizontal line specified by the [CanvasRenderingContext2D.textBaseline](#canvastextbaseline) attribute to the ideographic baseline of the line box. Read-only. The current value is **0**.|
