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