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