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