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