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