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