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>Default value: **'black'**<br>- When the type is **number**, this attribute indicates the color of the filling area.<br>Default value: **'#000000'**<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.| 41| [lineWidth](#linewidth) | number | No| No| Line width.<br>Default value: **1** (px)<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>Default value: **'black'**<br> <br>Default value: **'#000000'**<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.| 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** (px)<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: **'start'**| 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: vp| 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>Unit: px<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.0**<br>Default unit: vp| 55| [shadowOffsetY](#shadowoffsety) | number | No| No| Y-axis shadow offset relative to the original object.<br>Default value: **0.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 for an image. You can combine any number of filter effects.<br>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| 956| y | number | Yes | Y coordinate of the upper left corner of the rectangle.<br>Default unit: vp| 957| w | number | Yes | Width of the rectangle.<br>Default unit: vp| 958| h | number | Yes | Height of the rectangle.<br>Default unit: vp| 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| 1010| y | number | Yes | Y coordinate of the upper left corner of the rectangle.<br>Default unit: vp| 1011| width | number | Yes | Width of the rectangle.<br>Default unit: vp| 1012| height | number | Yes | Height of the rectangle.<br>Default unit: vp| 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| 1064| y | number | Yes | Y coordinate of the upper left corner of the rectangle.<br>Default unit: vp| 1065| width | number | Yes | Width of the rectangle.<br>Default unit: vp| 1066| height | number | Yes | Height of the rectangle.<br>Default unit: vp| 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.| 1120| x | number | Yes | X coordinate of the lower left corner of the text.<br>Default unit: vp| 1121| y | number | Yes | Y coordinate of the lower left corner of the text.<br>Default unit: vp| 1122| maxWidth | number | No | Maximum width allowed for the text.<br>Default unit: vp<br>Default value: no width restriction| 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.| 1175| x | number | Yes | X coordinate of the lower left corner of the text.<br>Default unit: vp| 1176| y | number | Yes | Y coordinate of the lower left corner of the text.<br>Default unit: vp| 1177| maxWidth | number | No | Maximum width of the text.<br>Default unit: vp<br>Default value: no width restriction| 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.| 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(): void 1275 1276Strokes (outlines) this 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**Example** 1285 1286 ```ts 1287 // xxx.ets 1288 @Entry 1289 @Component 1290 struct Stroke { 1291 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1292 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1293 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1294 1295 build() { 1296 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1297 Canvas(this.context) 1298 .width('100%') 1299 .height('100%') 1300 .backgroundColor('#ffff00') 1301 .onReady(() => { 1302 let offContext = this.offCanvas.getContext("2d", this.settings) 1303 offContext.moveTo(125, 25) 1304 offContext.lineTo(125, 105) 1305 offContext.lineTo(175, 105) 1306 offContext.lineTo(175, 25) 1307 offContext.strokeStyle = 'rgb(255,0,0)' 1308 offContext.stroke() 1309 let image = this.offCanvas.transferToImageBitmap() 1310 this.context.transferFromImageBitmap(image) 1311 }) 1312 } 1313 .width('100%') 1314 .height('100%') 1315 } 1316 } 1317 ``` 1318 1319  1320 1321stroke(path: Path2D): void 1322 1323Strokes (outlines) a specified path. 1324 1325**Widget capability**: This API can be used in ArkTS widgets since API version 9. 1326 1327**Atomic service API**: This API can be used in atomic services since API version 11. 1328 1329**System capability**: SystemCapability.ArkUI.ArkUI.Full 1330 1331 **Parameters** 1332 1333| Name | Type | Mandatory | Description| 1334| ---- | ---------------------------------------- | ---- | ------------ | 1335| path | [Path2D](ts-components-canvas-path2d.md) | Yes | A **Path2D** path to draw.| 1336 1337 **Example** 1338 1339 ```ts 1340 // xxx.ets 1341 @Entry 1342 @Component 1343 struct Stroke { 1344 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1345 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1346 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1347 private path2Da: Path2D = new Path2D() 1348 1349 build() { 1350 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1351 Canvas(this.context) 1352 .width('100%') 1353 .height('100%') 1354 .backgroundColor('#ffff00') 1355 .onReady(() => { 1356 let offContext = this.offCanvas.getContext("2d", this.settings) 1357 this.path2Da.moveTo(25, 25) 1358 this.path2Da.lineTo(25, 105) 1359 this.path2Da.lineTo(75, 105) 1360 this.path2Da.lineTo(75, 25) 1361 offContext.strokeStyle = 'rgb(0,0,255)' 1362 offContext.stroke(this.path2Da) 1363 let image = this.offCanvas.transferToImageBitmap() 1364 this.context.transferFromImageBitmap(image) 1365 }) 1366 } 1367 .width('100%') 1368 .height('100%') 1369 } 1370 } 1371 ``` 1372 1373  1374 1375 1376### beginPath 1377 1378beginPath(): void 1379 1380Creates a drawing path. 1381 1382**Widget capability**: This API can be used in ArkTS widgets since API version 9. 1383 1384**Atomic service API**: This API can be used in atomic services since API version 11. 1385 1386**System capability**: SystemCapability.ArkUI.ArkUI.Full 1387 1388 **Example** 1389 1390 ```ts 1391 // xxx.ets 1392 @Entry 1393 @Component 1394 struct BeginPath { 1395 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1396 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1397 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1398 1399 build() { 1400 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1401 Canvas(this.context) 1402 .width('100%') 1403 .height('100%') 1404 .backgroundColor('#ffff00') 1405 .onReady(() =>{ 1406 let offContext = this.offCanvas.getContext("2d", this.settings) 1407 offContext.beginPath() 1408 offContext.lineWidth = 6 1409 offContext.strokeStyle = '#0000ff' 1410 offContext.moveTo(15, 80) 1411 offContext.lineTo(280, 160) 1412 offContext.stroke() 1413 let image = this.offCanvas.transferToImageBitmap() 1414 this.context.transferFromImageBitmap(image) 1415 }) 1416 } 1417 .width('100%') 1418 .height('100%') 1419 } 1420 } 1421 ``` 1422 1423  1424 1425 1426### moveTo 1427 1428moveTo(x: number, y: number): void 1429 1430Moves a drawing path to a target position on the canvas. 1431 1432**Widget capability**: This API can be used in ArkTS widgets since API version 9. 1433 1434**Atomic service API**: This API can be used in atomic services since API version 11. 1435 1436**System capability**: SystemCapability.ArkUI.ArkUI.Full 1437 1438 **Parameters** 1439 1440| Name | Type | Mandatory | Description | 1441| ---- | ------ | ---- | --------- | 1442| x | number | Yes | X coordinate of the target position.<br>Default unit: vp| 1443| y | number | Yes | Y coordinate of the target position.<br>Default unit: vp| 1444 1445 **Example** 1446 1447 ```ts 1448 // xxx.ets 1449 @Entry 1450 @Component 1451 struct MoveTo { 1452 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1453 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1454 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1455 1456 build() { 1457 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1458 Canvas(this.context) 1459 .width('100%') 1460 .height('100%') 1461 .backgroundColor('#ffff00') 1462 .onReady(() =>{ 1463 let offContext = this.offCanvas.getContext("2d", this.settings) 1464 offContext.beginPath() 1465 offContext.moveTo(10, 10) 1466 offContext.lineTo(280, 160) 1467 offContext.stroke() 1468 let image = this.offCanvas.transferToImageBitmap() 1469 this.context.transferFromImageBitmap(image) 1470 }) 1471 } 1472 .width('100%') 1473 .height('100%') 1474 } 1475 } 1476 ``` 1477 1478  1479 1480 1481### lineTo 1482 1483lineTo(x: number, y: number): void 1484 1485Connects the current point to a target position using a straight line. 1486 1487**Widget capability**: This API can be used in ArkTS widgets since API version 9. 1488 1489**Atomic service API**: This API can be used in atomic services since API version 11. 1490 1491**System capability**: SystemCapability.ArkUI.ArkUI.Full 1492 1493 **Parameters** 1494 1495| Name | Type | Mandatory | Description | 1496| ---- | ------ | ---- | --------- | 1497| x | number | Yes | X coordinate of the target position.<br>Default unit: vp| 1498| y | number | Yes | Y coordinate of the target position.<br>Default unit: vp| 1499 1500 **Example** 1501 1502 ```ts 1503 // xxx.ets 1504 @Entry 1505 @Component 1506 struct LineTo { 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(10, 10) 1521 offContext.lineTo(280, 160) 1522 offContext.stroke() 1523 let image = this.offCanvas.transferToImageBitmap() 1524 this.context.transferFromImageBitmap(image) 1525 }) 1526 } 1527 .width('100%') 1528 .height('100%') 1529 } 1530 } 1531 ``` 1532 1533  1534 1535 1536### closePath 1537 1538closePath(): void 1539 1540Draws a closed path. 1541 1542**Widget capability**: This API can be used in ArkTS widgets since API version 9. 1543 1544**Atomic service API**: This API can be used in atomic services since API version 11. 1545 1546**System capability**: SystemCapability.ArkUI.ArkUI.Full 1547 1548 **Example** 1549 1550 ```ts 1551 // xxx.ets 1552 @Entry 1553 @Component 1554 struct ClosePath { 1555 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1556 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1557 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1558 1559 build() { 1560 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1561 Canvas(this.context) 1562 .width('100%') 1563 .height('100%') 1564 .backgroundColor('#ffff00') 1565 .onReady(() =>{ 1566 let offContext = this.offCanvas.getContext("2d", this.settings) 1567 offContext.beginPath() 1568 offContext.moveTo(30, 30) 1569 offContext.lineTo(110, 30) 1570 offContext.lineTo(70, 90) 1571 offContext.closePath() 1572 offContext.stroke() 1573 let image = this.offCanvas.transferToImageBitmap() 1574 this.context.transferFromImageBitmap(image) 1575 }) 1576 } 1577 .width('100%') 1578 .height('100%') 1579 } 1580 } 1581 ``` 1582 1583  1584 1585 1586### createPattern 1587 1588createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | null 1589 1590Creates a pattern for image filling based on a specified source image and repetition mode. 1591 1592**Widget capability**: This API can be used in ArkTS widgets since API version 9. 1593 1594**Atomic service API**: This API can be used in atomic services since API version 11. 1595 1596**System capability**: SystemCapability.ArkUI.ArkUI.Full 1597 1598**Parameters** 1599 1600| Name| Type| Mandatory | Description| 1601| ---------- | ---------------------------------------- | ---- | ---------------------------------------- | 1602| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Yes | Source image. For details, see **ImageBitmap**.| 1603| repetition | string \| null | Yes | Repetition mode. The value can be **'repeat'**, **'repeat-x'**, **'repeat-y'**, **'no-repeat'**, **'clamp'**, or **'mirror'**.| 1604 1605**Return value** 1606 1607| Type | Description | 1608| ---------------------------------------- | ----------------------- | 1609| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) \| null | Created pattern for image filling based on a specified source image and repetition mode.| 1610 1611 **Example** 1612 1613 ```ts 1614 // xxx.ets 1615 @Entry 1616 @Component 1617 struct CreatePattern { 1618 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1619 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1620 private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") 1621 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1622 1623 build() { 1624 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1625 Canvas(this.context) 1626 .width('100%') 1627 .height('100%') 1628 .backgroundColor('#ffff00') 1629 .onReady(() =>{ 1630 let offContext = this.offCanvas.getContext("2d", this.settings) 1631 let pattern = offContext.createPattern(this.img, 'repeat') 1632 offContext.fillStyle = pattern as CanvasPattern 1633 offContext.fillRect(0, 0, 200, 200) 1634 let image = this.offCanvas.transferToImageBitmap() 1635 this.context.transferFromImageBitmap(image) 1636 }) 1637 } 1638 .width('100%') 1639 .height('100%') 1640 } 1641 } 1642 ``` 1643 1644  1645 1646 1647### bezierCurveTo 1648 1649bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void 1650 1651Draws a cubic bezier curve on the canvas. 1652 1653**Widget capability**: This API can be used in ArkTS widgets since API version 9. 1654 1655**Atomic service API**: This API can be used in atomic services since API version 11. 1656 1657**System capability**: SystemCapability.ArkUI.ArkUI.Full 1658 1659 **Parameters** 1660 1661| Name | Type | Mandatory | Description | 1662| ---- | ------ | ---- | -------------- | 1663| cp1x | number | Yes | X coordinate of the first parameter of the bezier curve.<br>Default unit: vp| 1664| cp1y | number | Yes | Y coordinate of the first parameter of the bezier curve.<br>Default unit: vp| 1665| cp2x | number | Yes | X coordinate of the second parameter of the bezier curve.<br>Default unit: vp| 1666| cp2y | number | Yes | Y coordinate of the second parameter of the bezier curve.<br>Default unit: vp| 1667| x | number | Yes | X coordinate of the end point on the bezier curve.<br>Default unit: vp| 1668| y | number | Yes | Y coordinate of the end point on the bezier curve.<br>Default unit: vp| 1669 1670 **Example** 1671 1672 ```ts 1673 // xxx.ets 1674 @Entry 1675 @Component 1676 struct BezierCurveTo { 1677 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1678 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1679 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1680 1681 build() { 1682 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1683 Canvas(this.context) 1684 .width('100%') 1685 .height('100%') 1686 .backgroundColor('#ffff00') 1687 .onReady(() =>{ 1688 let offContext = this.offCanvas.getContext("2d", this.settings) 1689 offContext.beginPath() 1690 offContext.moveTo(10, 10) 1691 offContext.bezierCurveTo(20, 100, 200, 100, 200, 20) 1692 offContext.stroke() 1693 let image = this.offCanvas.transferToImageBitmap() 1694 this.context.transferFromImageBitmap(image) 1695 }) 1696 } 1697 .width('100%') 1698 .height('100%') 1699 } 1700 } 1701 ``` 1702 1703  1704 1705 1706### quadraticCurveTo 1707 1708quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void 1709 1710Draws a quadratic curve on the canvas. 1711 1712**Widget capability**: This API can be used in ArkTS widgets since API version 9. 1713 1714**Atomic service API**: This API can be used in atomic services since API version 11. 1715 1716**System capability**: SystemCapability.ArkUI.ArkUI.Full 1717 1718 **Parameters** 1719 1720| Name | Type | Mandatory | Description | 1721| ---- | ------ | ---- | -------------- | 1722| cpx | number | Yes | X coordinate of the bezier curve parameter.<br>Default unit: vp| 1723| cpy | number | Yes | Y coordinate of the bezier curve parameter.<br>Default unit: vp| 1724| x | number | Yes | X coordinate of the end point on the bezier curve.<br>Default unit: vp| 1725| y | number | Yes | Y coordinate of the end point on the bezier curve.<br>Default unit: vp| 1726 1727 **Example** 1728 1729 ```ts 1730 // xxx.ets 1731 @Entry 1732 @Component 1733 struct QuadraticCurveTo { 1734 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1735 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1736 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1737 1738 build() { 1739 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1740 Canvas(this.context) 1741 .width('100%') 1742 .height('100%') 1743 .backgroundColor('#ffff00') 1744 .onReady(() =>{ 1745 let offContext = this.offCanvas.getContext("2d", this.settings) 1746 offContext.beginPath() 1747 offContext.moveTo(20, 20) 1748 offContext.quadraticCurveTo(100, 100, 200, 20) 1749 offContext.stroke() 1750 let image = this.offCanvas.transferToImageBitmap() 1751 this.context.transferFromImageBitmap(image) 1752 }) 1753 } 1754 .width('100%') 1755 .height('100%') 1756 } 1757 } 1758 ``` 1759 1760  1761 1762 1763### arc 1764 1765arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void 1766 1767Draws an arc on the canvas. 1768 1769**Widget capability**: This API can be used in ArkTS widgets since API version 9. 1770 1771**Atomic service API**: This API can be used in atomic services since API version 11. 1772 1773**System capability**: SystemCapability.ArkUI.ArkUI.Full 1774 1775 **Parameters** 1776 1777| Name| Type | Mandatory | Description | 1778| ---------------- | ------- | ---- | ---------- | 1779| x | number | Yes | X coordinate of the center point of the arc.<br>Default unit: vp| 1780| y | number | Yes | Y coordinate of the center point of the arc.<br>Default unit: vp| 1781| radius | number | Yes | Radius of the arc.<br>Default unit: vp| 1782| startAngle | number | Yes | Start radian of the arc.<br>Default unit: radian| 1783| endAngle | number | Yes | End radian of the arc.<br>Default unit: radian| 1784| counterclockwise | boolean | No | Whether to draw the arc counterclockwise.<br>Default value: **false**| 1785 1786 **Example** 1787 1788 ```ts 1789 // xxx.ets 1790 @Entry 1791 @Component 1792 struct Arc { 1793 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1794 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1795 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1796 1797 build() { 1798 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1799 Canvas(this.context) 1800 .width('100%') 1801 .height('100%') 1802 .backgroundColor('#ffff00') 1803 .onReady(() =>{ 1804 let offContext = this.offCanvas.getContext("2d", this.settings) 1805 offContext.beginPath() 1806 offContext.arc(100, 75, 50, 0, 6.28) 1807 offContext.stroke() 1808 let image = this.offCanvas.transferToImageBitmap() 1809 this.context.transferFromImageBitmap(image) 1810 }) 1811 } 1812 .width('100%') 1813 .height('100%') 1814 } 1815 } 1816 ``` 1817 1818  1819 1820 1821### arcTo 1822 1823arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void 1824 1825Creates a circular arc using the given control points and radius. 1826 1827**Widget capability**: This API can be used in ArkTS widgets since API version 9. 1828 1829**Atomic service API**: This API can be used in atomic services since API version 11. 1830 1831**System capability**: SystemCapability.ArkUI.ArkUI.Full 1832 1833 **Parameters** 1834 1835| Name | Type | Mandatory | Description | 1836| ------ | ------ | ---- | --------------- | 1837| x1 | number | Yes | X coordinate of the first control point.<br>Default unit: vp| 1838| y1 | number | Yes | Y coordinate of the first control point.<br>Default unit: vp| 1839| x2 | number | Yes | X coordinate of the second control point.<br>Default unit: vp| 1840| y2 | number | Yes | Y coordinate of the second control point.<br>Default unit: vp| 1841| radius | number | Yes | Radius of the arc.<br>Default unit: vp| 1842 1843 **Example** 1844 1845 ```ts 1846 // xxx.ets 1847 @Entry 1848 @Component 1849 struct ArcTo { 1850 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1851 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1852 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1853 1854 build() { 1855 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1856 Canvas(this.context) 1857 .width('100%') 1858 .height('100%') 1859 .backgroundColor('#ffff00') 1860 .onReady(() =>{ 1861 let offContext = this.offCanvas.getContext("2d", this.settings) 1862 1863 // Tangent 1864 offContext.beginPath() 1865 offContext.strokeStyle = '#808080' 1866 offContext.lineWidth = 1.5; 1867 offContext.moveTo(360, 20); 1868 offContext.lineTo(360, 170); 1869 offContext.lineTo(110, 170); 1870 offContext.stroke(); 1871 1872 // Arc 1873 offContext.beginPath() 1874 offContext.strokeStyle = '#000000' 1875 offContext.lineWidth = 3; 1876 offContext.moveTo(360, 20) 1877 offContext.arcTo(360, 170, 110, 170, 150) 1878 offContext.stroke() 1879 1880 // Start point 1881 offContext.beginPath(); 1882 offContext.fillStyle = '#00ff00'; 1883 offContext.arc(360, 20, 4, 0, 2 * Math.PI); 1884 offContext.fill(); 1885 1886 // Control points 1887 offContext.beginPath(); 1888 offContext.fillStyle = '#ff0000'; 1889 offContext.arc(360, 170, 4, 0, 2 * Math.PI); 1890 offContext.arc(110, 170, 4, 0, 2 * Math.PI); 1891 offContext.fill(); 1892 1893 let image = this.offCanvas.transferToImageBitmap() 1894 this.context.transferFromImageBitmap(image) 1895 }) 1896 } 1897 .width('100%') 1898 .height('100%') 1899 } 1900 } 1901 ``` 1902 1903  1904 1905 > In this example, the arc created by **arcTo()** is black, and the two tangents of the arc are gray. The control points are marked in red, and the start point is indicated in green. 1906 > 1907 > You can visualize two tangents: One tangent extends from the start point to the first control point, and the other tangent extends from the first control point to the second control point. The **arcTo()** API creates an arc between these two tangents, ensuring that the arc is tangent to both lines at the points of contact. 1908 1909 1910### ellipse 1911 1912ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void 1913 1914Draws an ellipse in the specified rectangular region on the canvas. 1915 1916**Widget capability**: This API can be used in ArkTS widgets since API version 9. 1917 1918**Atomic service API**: This API can be used in atomic services since API version 11. 1919 1920**System capability**: SystemCapability.ArkUI.ArkUI.Full 1921 1922 **Parameters** 1923 1924| Name | Type | Mandatory | Description| 1925| ---------------- | ------- | ---- | ---------------------------------------- | 1926| x | number | Yes | X coordinate of the ellipse center.<br>Default unit: vp| 1927| y | number | Yes | Y coordinate of the ellipse center.<br>Default unit: vp| 1928| radiusX | number | Yes | Radius of the ellipse on the x-axis.<br>Default unit: vp| 1929| radiusY | number | Yes | Radius of the ellipse on the y-axis.<br>Default unit: vp| 1930| rotation | number | Yes | Rotation angle of the ellipse.<br>Unit: radian| 1931| startAngle | number | Yes | Angle of the start point for drawing the ellipse.<br>Unit: radian| 1932| endAngle | number | Yes | Angle of the end point for drawing the ellipse.<br>Unit: radian| 1933| 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**| 1934 1935 **Example** 1936 1937 ```ts 1938 // xxx.ets 1939 @Entry 1940 @Component 1941 struct CanvasExample { 1942 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1943 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1944 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1945 build() { 1946 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1947 Canvas(this.context) 1948 .width('100%') 1949 .height('100%') 1950 .backgroundColor('#ffff00') 1951 .onReady(() =>{ 1952 let offContext = this.offCanvas.getContext("2d", this.settings) 1953 offContext.beginPath() 1954 offContext.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI * 2, false) 1955 offContext.stroke() 1956 offContext.beginPath() 1957 offContext.ellipse(200, 300, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI * 2, true) 1958 offContext.stroke() 1959 let image = this.offCanvas.transferToImageBitmap() 1960 this.context.transferFromImageBitmap(image) 1961 }) 1962 } 1963 .width('100%') 1964 .height('100%') 1965 } 1966 } 1967 ``` 1968 1969  1970 1971 1972### rect 1973 1974rect(x: number, y: number, w: number, h: number): void 1975 1976Creates a rectangle on the canvas. 1977 1978**Widget capability**: This API can be used in ArkTS widgets since API version 9. 1979 1980**Atomic service API**: This API can be used in atomic services since API version 11. 1981 1982**System capability**: SystemCapability.ArkUI.ArkUI.Full 1983 1984 **Parameters** 1985 1986| Name | Type | Mandatory| Description| 1987| ---- | ------ | ---- | ------------- | 1988| x | number | Yes | X coordinate of the upper left corner of the rectangle.<br>Default unit: vp| 1989| y | number | Yes | Y coordinate of the upper left corner of the rectangle.<br>Default unit: vp| 1990| w | number | Yes | Width of the rectangle.<br>Default unit: vp| 1991| h | number | Yes | Height of the rectangle.<br>Default unit: vp| 1992 1993 **Example** 1994 1995 ```ts 1996 // xxx.ets 1997 @Entry 1998 @Component 1999 struct CanvasExample { 2000 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2001 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2002 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2003 2004 build() { 2005 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2006 Canvas(this.context) 2007 .width('100%') 2008 .height('100%') 2009 .backgroundColor('#ffff00') 2010 .onReady(() =>{ 2011 let offContext = this.offCanvas.getContext("2d", this.settings) 2012 offContext.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20) 2013 offContext.stroke() 2014 let image = this.offCanvas.transferToImageBitmap() 2015 this.context.transferFromImageBitmap(image) 2016 }) 2017 } 2018 .width('100%') 2019 .height('100%') 2020 } 2021 } 2022 ``` 2023 2024  2025 2026 2027### fill 2028 2029fill(fillRule?: CanvasFillRule): void 2030 2031Fills the area inside a closed path on the canvas. 2032 2033**Widget capability**: This API can be used in ArkTS widgets since API version 9. 2034 2035**Atomic service API**: This API can be used in atomic services since API version 11. 2036 2037**System capability**: SystemCapability.ArkUI.ArkUI.Full 2038 2039**Parameters** 2040 2041| Name| Type| Mandatory | Description| 2042| -------- | -------------- | ---- | ---------------------------------------- | 2043| 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"**| 2044 2045 ```ts 2046 // xxx.ets 2047 @Entry 2048 @Component 2049 struct Fill { 2050 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2051 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2052 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2053 2054 build() { 2055 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2056 Canvas(this.context) 2057 .width('100%') 2058 .height('100%') 2059 .backgroundColor('#ffff00') 2060 .onReady(() =>{ 2061 let offContext = this.offCanvas.getContext("2d", this.settings) 2062 offContext.fillStyle = '#000000' 2063 offContext.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20) 2064 offContext.fill() 2065 let image = this.offCanvas.transferToImageBitmap() 2066 this.context.transferFromImageBitmap(image) 2067 }) 2068 } 2069 .width('100%') 2070 .height('100%') 2071 } 2072 } 2073 ``` 2074 2075  2076 2077 2078fill(path: Path2D, fillRule?: CanvasFillRule): void 2079 2080Fills the area inside a closed path on the canvas. 2081 2082**Widget capability**: This API can be used in ArkTS widgets since API version 9. 2083 2084**Atomic service API**: This API can be used in atomic services since API version 11. 2085 2086**System capability**: SystemCapability.ArkUI.ArkUI.Full 2087 2088**Parameters** 2089 2090| Name | Type| Mandatory| Description| 2091| -------- | -------------- | ---- | ----------------- | 2092| path | [Path2D](ts-components-canvas-path2d.md) | Yes | A **Path2D** path to fill. | 2093| 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"**| 2094 2095**Example** 2096 2097```ts 2098// xxx.ets 2099@Entry 2100@Component 2101struct Fill { 2102 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2103 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2104 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2105 2106 build() { 2107 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2108 Canvas(this.context) 2109 .width('100%') 2110 .height('100%') 2111 .backgroundColor('#ffff00') 2112 .onReady(() =>{ 2113 let offContext = this.offCanvas.getContext("2d", this.settings) 2114 let region = new Path2D() 2115 region.moveTo(30, 90) 2116 region.lineTo(110, 20) 2117 region.lineTo(240, 130) 2118 region.lineTo(60, 130) 2119 region.lineTo(190, 20) 2120 region.lineTo(270, 90) 2121 region.closePath() 2122 // Fill path 2123 offContext.fillStyle = '#00ff00' 2124 offContext.fill(region, "evenodd") 2125 let image = this.offCanvas.transferToImageBitmap() 2126 this.context.transferFromImageBitmap(image) 2127 }) 2128 } 2129 .width('100%') 2130 .height('100%') 2131 } 2132} 2133``` 2134 2135  2136 2137 2138 2139### clip 2140 2141clip(fillRule?: CanvasFillRule): void 2142 2143Sets the current path to a clipping path. 2144 2145**Widget capability**: This API can be used in ArkTS widgets since API version 9. 2146 2147**Atomic service API**: This API can be used in atomic services since API version 11. 2148 2149**System capability**: SystemCapability.ArkUI.ArkUI.Full 2150 2151**Parameters** 2152 2153| Name| Type| Mandatory | Description| 2154| -------- | -------------- | ---- | ---------------------------------------- | 2155| 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"**| 2156 2157 **Example** 2158 2159 ```ts 2160 // xxx.ets 2161 @Entry 2162 @Component 2163 struct Clip { 2164 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2165 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2166 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2167 2168 build() { 2169 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2170 Canvas(this.context) 2171 .width('100%') 2172 .height('100%') 2173 .backgroundColor('#ffff00') 2174 .onReady(() =>{ 2175 let offContext = this.offCanvas.getContext("2d", this.settings) 2176 offContext.rect(0, 0, 100, 200) 2177 offContext.stroke() 2178 offContext.clip() 2179 offContext.fillStyle = "rgb(255,0,0)" 2180 offContext.fillRect(0, 0, 200, 200) 2181 let image = this.offCanvas.transferToImageBitmap() 2182 this.context.transferFromImageBitmap(image) 2183 }) 2184 } 2185 .width('100%') 2186 .height('100%') 2187 } 2188 } 2189 ``` 2190 2191  2192 2193 2194clip(path: Path2D, fillRule?: CanvasFillRule): void 2195 2196Sets a closed path to a clipping path. 2197 2198**Widget capability**: This API can be used in ArkTS widgets since API version 9. 2199 2200**Atomic service API**: This API can be used in atomic services since API version 11. 2201 2202**System capability**: SystemCapability.ArkUI.ArkUI.Full 2203 2204**Parameters** 2205 2206| Name | Type| Mandatory | Description | 2207| -------- | -------------- | ---- | ---------------------------------------- | 2208| path | [Path2D](ts-components-canvas-path2d.md) | Yes| A **Path2D** path to clip.| 2209| 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"**| 2210 2211 **Example** 2212 2213 ```ts 2214 // xxx.ets 2215 @Entry 2216 @Component 2217 struct Clip { 2218 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2219 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2220 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2221 2222 build() { 2223 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2224 Canvas(this.context) 2225 .width('100%') 2226 .height('100%') 2227 .backgroundColor('#ffff00') 2228 .onReady(() =>{ 2229 let offContext = this.offCanvas.getContext("2d", this.settings) 2230 let region = new Path2D() 2231 region.moveTo(30, 90) 2232 region.lineTo(110, 20) 2233 region.lineTo(240, 130) 2234 region.lineTo(60, 130) 2235 region.lineTo(190, 20) 2236 region.lineTo(270, 90) 2237 region.closePath() 2238 offContext.clip(region,"evenodd") 2239 offContext.fillStyle = "rgb(0,255,0)" 2240 offContext.fillRect(0, 0, 600, 600) 2241 let image = this.offCanvas.transferToImageBitmap() 2242 this.context.transferFromImageBitmap(image) 2243 }) 2244 } 2245 .width('100%') 2246 .height('100%') 2247 } 2248 } 2249 ``` 2250 2251  2252 2253 2254### reset<sup>12+</sup> 2255 2256reset(): void 2257 2258Resets this **OffscreenCanvasRenderingContext2D** object to its default state and clears the background buffer, drawing state stack, defined paths, and styles. 2259 2260**System capability**: SystemCapability.ArkUI.ArkUI.Full 2261 2262**Example** 2263 2264 ```ts 2265 // xxx.ets 2266 @Entry 2267 @Component 2268 struct Reset { 2269 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2270 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2271 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2272 2273 build() { 2274 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2275 Canvas(this.context) 2276 .width('100%') 2277 .height('100%') 2278 .backgroundColor('#ffff00') 2279 .onReady(() =>{ 2280 let offContext = this.offCanvas.getContext("2d", this.settings) 2281 offContext.fillStyle = '#0000ff' 2282 offContext.fillRect(20, 20, 150, 100) 2283 offContext.reset() 2284 offContext.fillRect(20, 150, 150, 100) 2285 let image = this.offCanvas.transferToImageBitmap() 2286 this.context.transferFromImageBitmap(image) 2287 }) 2288 } 2289 .width('100%') 2290 .height('100%') 2291 } 2292 } 2293 ``` 2294 2295  2296 2297### saveLayer<sup>12+</sup> 2298 2299saveLayer(): void 2300 2301Saves this layer. 2302 2303**Atomic service API**: This API can be used in atomic services since API version 12. 2304 2305**System capability**: SystemCapability.ArkUI.ArkUI.Full 2306 2307**Example** 2308 2309 ```ts 2310 // xxx.ets 2311 @Entry 2312 @Component 2313 struct ResetTransform { 2314 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2315 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2316 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2317 2318 build() { 2319 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2320 Canvas(this.context) 2321 .width('100%') 2322 .height('100%') 2323 .backgroundColor('#ffff00') 2324 .onReady(() => { 2325 let offContext = this.offCanvas.getContext("2d", this.settings) 2326 offContext.setTransform(1,0.5, -0.5, 1, 10, 10) 2327 offContext.fillStyle = 'rgb(0,0,255)' 2328 offContext.fillRect(0, 0, 100, 100) 2329 offContext.resetTransform() 2330 offContext.fillStyle = 'rgb(255,0,0)' 2331 offContext.fillRect(0, 0, 100, 100) 2332 let image = this.offCanvas.transferToImageBitmap() 2333 this.context.transferFromImageBitmap(image) 2334 }) 2335 } 2336 .width('100%') 2337 .height('100%') 2338 } 2339 } 2340 ``` 2341  2342 2343### restoreLayer<sup>12+</sup> 2344 2345restoreLayer(): void 2346 2347Restores 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**. 2348 2349**Atomic service API**: This API can be used in atomic services since API version 12. 2350 2351**System capability**: SystemCapability.ArkUI.ArkUI.Full 2352 2353### resetTransform 2354 2355resetTransform(): void 2356 2357Resets the current transform to the identity matrix. 2358 2359**Widget capability**: This API can be used in ArkTS widgets since API version 9. 2360 2361**Atomic service API**: This API can be used in atomic services since API version 11. 2362 2363**System capability**: SystemCapability.ArkUI.ArkUI.Full 2364 2365**Example** 2366 2367 ```ts 2368 // xxx.ets 2369 @Entry 2370 @Component 2371 struct ResetTransform { 2372 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2373 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2374 2375 build() { 2376 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2377 Canvas(this.context) 2378 .width('100%') 2379 .height('100%') 2380 .backgroundColor('#ffff00') 2381 .onReady(() =>{ 2382 this.context.setTransform(1,0.5, -0.5, 1, 10, 10) 2383 this.context.fillStyle = 'rgb(0,0,255)' 2384 this.context.fillRect(0, 0, 100, 100) 2385 this.context.resetTransform() 2386 this.context.fillStyle = 'rgb(255,0,0)' 2387 this.context.fillRect(0, 0, 100, 100) 2388 }) 2389 } 2390 .width('100%') 2391 .height('100%') 2392 } 2393 } 2394 ``` 2395 2396### rotate 2397 2398rotate(angle: number): void 2399 2400Rotates a canvas clockwise around its coordinate axes. 2401 2402**Widget capability**: This API can be used in ArkTS widgets since API version 9. 2403 2404**Atomic service API**: This API can be used in atomic services since API version 11. 2405 2406**System capability**: SystemCapability.ArkUI.ArkUI.Full 2407 2408 **Parameters** 2409 2410| Name | Type | Mandatory | Description| 2411| ----- | ------ | ---- | ---------------------------------------- | 2412| angle | number | Yes | Clockwise rotation angle. You can convert degrees to radians using the following formula: degree * Math.PI/180.<br>Unit: radian| 2413 2414 **Example** 2415 2416 ```ts 2417 // xxx.ets 2418 @Entry 2419 @Component 2420 struct Rotate { 2421 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2422 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2423 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2424 2425 build() { 2426 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2427 Canvas(this.context) 2428 .width('100%') 2429 .height('100%') 2430 .backgroundColor('#ffff00') 2431 .onReady(() =>{ 2432 let offContext = this.offCanvas.getContext("2d", this.settings) 2433 offContext.rotate(45 * Math.PI / 180) 2434 offContext.fillRect(70, 20, 50, 50) 2435 let image = this.offCanvas.transferToImageBitmap() 2436 this.context.transferFromImageBitmap(image) 2437 }) 2438 } 2439 .width('100%') 2440 .height('100%') 2441 } 2442 } 2443 ``` 2444 2445  2446 2447 2448### scale 2449 2450scale(x: number, y: number): void 2451 2452Scales the canvas based on scale factors. 2453 2454**Widget capability**: This API can be used in ArkTS widgets since API version 9. 2455 2456**Atomic service API**: This API can be used in atomic services since API version 11. 2457 2458**System capability**: SystemCapability.ArkUI.ArkUI.Full 2459 2460 **Parameters** 2461 2462| Name | Type | Mandatory | Description | 2463| ---- | ------ | ---- | ----------- | 2464| x | number | Yes | Horizontal scale factor.| 2465| y | number | Yes | Vertical scale factor.| 2466 2467 **Example** 2468 2469 ```ts 2470 // xxx.ets 2471 @Entry 2472 @Component 2473 struct Scale { 2474 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2475 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2476 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2477 2478 build() { 2479 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2480 Canvas(this.context) 2481 .width('100%') 2482 .height('100%') 2483 .backgroundColor('#ffff00') 2484 .onReady(() =>{ 2485 let offContext = this.offCanvas.getContext("2d", this.settings) 2486 offContext.lineWidth = 3 2487 offContext.strokeRect(30, 30, 50, 50) 2488 offContext.scale(2, 2) // Scale to 200% 2489 offContext.strokeRect(30, 30, 50, 50) 2490 let image = this.offCanvas.transferToImageBitmap() 2491 this.context.transferFromImageBitmap(image) 2492 }) 2493 } 2494 .width('100%') 2495 .height('100%') 2496 } 2497 } 2498 ``` 2499 2500  2501 2502 2503### transform 2504 2505transform(a: number, b: number, c: number, d: number, e: number, f: number): void 2506 2507Defines 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. 2508 2509**Widget capability**: This API can be used in ArkTS widgets since API version 9. 2510 2511**Atomic service API**: This API can be used in atomic services since API version 11. 2512 2513**System capability**: SystemCapability.ArkUI.ArkUI.Full 2514 2515> **NOTE** 2516> The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation. 2517> 2518> - x' = scaleX \* x + skewY \* y + translateX 2519> 2520> - y' = skewX \* x + scaleY \* y + translateY 2521 2522**Parameters** 2523 2524| Name | Type | Mandatory| Description| 2525| ---- | ------ | ---- | -------------------- | 2526| a | number | Yes | X-axis scale.| 2527| b | number | Yes | **skewY**: y-axis skew. | 2528| c | number | Yes | **skewX**: y-axis skew. | 2529| d | number | Yes | Y-axis scale.| 2530| e | number | Yes | **translateX**: distance to translate on the x-axis.<br>Default unit: vp| 2531| f | number | Yes | **translateY**: distance to translate on the y-axis.<br>Default unit: vp| 2532 2533 **Example** 2534 2535 ```ts 2536 // xxx.ets 2537 @Entry 2538 @Component 2539 struct Transform { 2540 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2541 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2542 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2543 2544 build() { 2545 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2546 Canvas(this.context) 2547 .width('100%') 2548 .height('100%') 2549 .backgroundColor('#ffff00') 2550 .onReady(() =>{ 2551 let offContext = this.offCanvas.getContext("2d", this.settings) 2552 offContext.fillStyle = 'rgb(0,0,0)' 2553 offContext.fillRect(0, 0, 100, 100) 2554 offContext.transform(1, 0.5, -0.5, 1, 10, 10) 2555 offContext.fillStyle = 'rgb(255,0,0)' 2556 offContext.fillRect(0, 0, 100, 100) 2557 offContext.transform(1, 0.5, -0.5, 1, 10, 10) 2558 offContext.fillStyle = 'rgb(0,0,255)' 2559 offContext.fillRect(0, 0, 100, 100) 2560 let image = this.offCanvas.transferToImageBitmap() 2561 this.context.transferFromImageBitmap(image) 2562 }) 2563 } 2564 .width('100%') 2565 .height('100%') 2566 } 2567 } 2568 ``` 2569 2570  2571 2572 2573### setTransform 2574 2575setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void 2576 2577Resets the existing transformation matrix and creates a new transformation matrix by using the same parameters as the **transform()** API. 2578 2579**Widget capability**: This API can be used in ArkTS widgets since API version 9. 2580 2581**Atomic service API**: This API can be used in atomic services since API version 11. 2582 2583**System capability**: SystemCapability.ArkUI.ArkUI.Full 2584 2585**Parameters** 2586 2587| Name | Type | Mandatory | Description | 2588| ---- | ------ | ---- | -------------------- | 2589| a | number | Yes | X-axis scale.| 2590| b | number | Yes | **skewY**: y-axis skew. | 2591| c | number | Yes | **skewX**: y-axis skew. | 2592| d | number | Yes | Y-axis scale.| 2593| e | number | Yes | **translateX**: distance to translate on the x-axis.<br>Default unit: vp| 2594| f | number | Yes | **translateY**: distance to translate on the y-axis.<br>Default unit: vp| 2595 2596 **Example** 2597 2598 ```ts 2599 // xxx.ets 2600 @Entry 2601 @Component 2602 struct SetTransform { 2603 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2604 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2605 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2606 2607 build() { 2608 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2609 Canvas(this.context) 2610 .width('100%') 2611 .height('100%') 2612 .backgroundColor('#ffff00') 2613 .onReady(() =>{ 2614 let offContext = this.offCanvas.getContext("2d", this.settings) 2615 offContext.fillStyle = 'rgb(255,0,0)' 2616 offContext.fillRect(0, 0, 100, 100) 2617 offContext.setTransform(1,0.5, -0.5, 1, 10, 10) 2618 offContext.fillStyle = 'rgb(0,0,255)' 2619 offContext.fillRect(0, 0, 100, 100) 2620 let image = this.offCanvas.transferToImageBitmap() 2621 this.context.transferFromImageBitmap(image) 2622 }) 2623 } 2624 .width('100%') 2625 .height('100%') 2626 } 2627 } 2628 ``` 2629 2630  2631 2632 2633### setTransform 2634 2635setTransform(transform?: Matrix2D): void 2636 2637Resets the current transformation and creates a new transformation matrix based on the specified **Matrix2D** object. 2638 2639**Widget capability**: This API can be used in ArkTS widgets since API version 9. 2640 2641**Atomic service API**: This API can be used in atomic services since API version 11. 2642 2643**System capability**: SystemCapability.ArkUI.ArkUI.Full 2644 2645**Parameters** 2646 2647| Name | Type| Mandatory | Description | 2648| --------- | ---------------------------------------- | ---- | ----- | 2649| transform | [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | No| Transformation matrix.<br>Default value: **null**| 2650 2651**Example** 2652 ```ts 2653 // xxx.ets 2654 @Entry 2655 @Component 2656 struct TransFormDemo { 2657 private settings: RenderingContextSettings = new RenderingContextSettings(true); 2658 private context1: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2659 private offcontext1: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 200, this.settings); 2660 private context2: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2661 private offcontext2: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 200, this.settings); 2662 2663 build() { 2664 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2665 Text('context1'); 2666 Canvas(this.context1) 2667 .width('230vp') 2668 .height('160vp') 2669 .backgroundColor('#ffff00') 2670 .onReady(() =>{ 2671 this.offcontext1.fillRect(100, 20, 50, 50); 2672 this.offcontext1.setTransform(1, 0.5, -0.5, 1, 10, 10); 2673 this.offcontext1.fillRect(100, 20, 50, 50); 2674 let image = this.offcontext1.transferToImageBitmap(); 2675 this.context1.transferFromImageBitmap(image); 2676 }) 2677 Text('context2'); 2678 Canvas(this.context2) 2679 .width('230vp') 2680 .height('160vp') 2681 .backgroundColor('#0ffff0') 2682 .onReady(() =>{ 2683 this.offcontext2.fillRect(100, 20, 50, 50); 2684 let storedTransform = this.offcontext1.getTransform(); 2685 this.offcontext2.setTransform(storedTransform); 2686 this.offcontext2.fillRect(100, 20, 50, 50); 2687 let image = this.offcontext2.transferToImageBitmap(); 2688 this.context2.transferFromImageBitmap(image); 2689 }) 2690 } 2691 .width('100%') 2692 .height('100%') 2693 } 2694 } 2695 ``` 2696  2697 2698### getTransform 2699 2700getTransform(): Matrix2D 2701 2702Obtains the current transformation matrix being applied to the context. 2703 2704**Widget capability**: This API can be used in ArkTS widgets since API version 9. 2705 2706**Atomic service API**: This API can be used in atomic services since API version 11. 2707 2708**System capability**: SystemCapability.ArkUI.ArkUI.Full 2709 2710**Return value** 2711 2712| Type | Description | 2713| ---------------------------------------- | ----- | 2714| [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | Matrix object.| 2715 2716**Example** 2717 2718 ```ts 2719 // xxx.ets 2720 @Entry 2721 @Component 2722 struct TransFormDemo { 2723 private settings: RenderingContextSettings = new RenderingContextSettings(true); 2724 private context1: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2725 private offcontext1: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 100, this.settings); 2726 private context2: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2727 private offcontext2: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 100, this.settings); 2728 2729 build() { 2730 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2731 Text('context1'); 2732 Canvas(this.context1) 2733 .width('230vp') 2734 .height('120vp') 2735 .backgroundColor('#ffff00') 2736 .onReady(() =>{ 2737 this.offcontext1.fillRect(50, 50, 50, 50); 2738 this.offcontext1.setTransform(1.2, Math.PI/8, Math.PI/6, 0.5, 30, -25); 2739 this.offcontext1.fillRect(50, 50, 50, 50); 2740 let image = this.offcontext1.transferToImageBitmap(); 2741 this.context1.transferFromImageBitmap(image); 2742 }) 2743 Text('context2'); 2744 Canvas(this.context2) 2745 .width('230vp') 2746 .height('120vp') 2747 .backgroundColor('#0ffff0') 2748 .onReady(() =>{ 2749 this.offcontext2.fillRect(50, 50, 50, 50); 2750 let storedTransform = this.offcontext1.getTransform(); 2751 console.log("Matrix [scaleX = " + storedTransform.scaleX + ", scaleY = " + storedTransform.scaleY + 2752 ", rotateX = " + storedTransform.rotateX + ", rotateY = " + storedTransform.rotateY + 2753 ", translateX = " + storedTransform.translateX + ", translateY = " + storedTransform.translateY + "]") 2754 this.offcontext2.setTransform(storedTransform); 2755 this.offcontext2.fillRect(50,50,50,50); 2756 let image = this.offcontext2.transferToImageBitmap(); 2757 this.context2.transferFromImageBitmap(image); 2758 }) 2759 } 2760 .width('100%') 2761 .height('100%') 2762 } 2763 } 2764 ``` 2765 2766  2767 2768### translate 2769 2770translate(x: number, y: number): void 2771 2772Moves the origin of the coordinate system. 2773 2774**Widget capability**: This API can be used in ArkTS widgets since API version 9. 2775 2776**Atomic service API**: This API can be used in atomic services since API version 11. 2777 2778**System capability**: SystemCapability.ArkUI.ArkUI.Full 2779 2780 **Parameters** 2781 2782| Name | Type | Mandatory | Description| 2783| ---- | ------ | ---- | -------- | 2784| x | number | Yes | Distance to translate on the x-axis.<br>Default unit: vp| 2785| y | number | Yes | Distance to translate on the y-axis.<br>Default unit: vp| 2786 2787 **Example** 2788 2789 ```ts 2790 // xxx.ets 2791 @Entry 2792 @Component 2793 struct Translate { 2794 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2795 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2796 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2797 2798 build() { 2799 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2800 Canvas(this.context) 2801 .width('100%') 2802 .height('100%') 2803 .backgroundColor('#ffff00') 2804 .onReady(() =>{ 2805 let offContext = this.offCanvas.getContext("2d", this.settings) 2806 offContext.fillRect(10, 10, 50, 50) 2807 offContext.translate(70, 70) 2808 offContext.fillRect(10, 10, 50, 50) 2809 let image = this.offCanvas.transferToImageBitmap() 2810 this.context.transferFromImageBitmap(image) 2811 }) 2812 } 2813 .width('100%') 2814 .height('100%') 2815 } 2816 } 2817 ``` 2818 2819  2820 2821 2822### drawImage 2823 2824drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number): void 2825 2826Draws an image on the canvas. 2827 2828**Widget capability**: This API can be used in ArkTS widgets since API version 9, except that **PixelMap** objects are not supported. 2829 2830**Atomic service API**: This API can be used in atomic services since API version 11. 2831 2832**System capability**: SystemCapability.ArkUI.ArkUI.Full 2833 2834 **Parameters** 2835 2836| Name | Type| Mandatory | Description| 2837| ----- | ---------------------------------------- | ---- | ----------------------------- | 2838| 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**.| 2839| dx | number | Yes | X coordinate of the upper left corner of the drawing area on the canvas.<br>Default unit: vp| 2840| dy | number | Yes | Y coordinate of the upper left corner of the drawing area on the canvas.<br>Default unit: vp| 2841 2842drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number, dw: number, dh: number): void 2843 2844Draws an image on the canvas. 2845 2846**Widget capability**: This API can be used in ArkTS widgets since API version 9, except that **PixelMap** objects are not supported. 2847 2848**Atomic service API**: This API can be used in atomic services since API version 11. 2849 2850**System capability**: SystemCapability.ArkUI.ArkUI.Full 2851 2852 **Parameters** 2853 2854| Name | Type| Mandatory | Description| 2855| ----- | ---------------------------------------- | ---- | ----------------------------- | 2856| 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**.| 2857| dx | number | Yes | X coordinate of the upper left corner of the drawing area on the canvas.<br>Default unit: vp| 2858| dy | number | Yes | Y coordinate of the upper left corner of the drawing area on the canvas.<br>Default unit: vp| 2859| dw | number | Yes | Width of the drawing area.<br>Default unit: vp| 2860| dh | number | Yes | Height of the drawing area.<br>Default unit: vp| 2861 2862drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void 2863 2864Draws an image on the canvas. 2865 2866**Widget capability**: This API can be used in ArkTS widgets since API version 9, except that **PixelMap** objects are not supported. 2867 2868**Atomic service API**: This API can be used in atomic services since API version 11. 2869 2870**System capability**: SystemCapability.ArkUI.ArkUI.Full 2871 2872 **Parameters** 2873 2874| Name | Type| Mandatory | Description| 2875| ----- | ---------------------------------------- | ---- | ----------------------------- | 2876| 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**.| 2877| sx | number | Yes | X coordinate of the upper left corner of the rectangle used to crop the source image.<br>If the type of **image** is ImageBitmap, the default unit is vp.<br>If the type of **image** is PixelMap, the default unit is px.| 2878| sy | number | Yes | Y coordinate of the upper left corner of the rectangle used to crop the source image.<br>If the type of **image** is ImageBitmap, the default unit is vp.<br>If the type of **image** is PixelMap, the default unit is px.| 2879| sw | number | Yes | Target width by which the source image is cropped.<br>If the type of **image** is ImageBitmap, the default unit is vp.<br>If the type of **image** is PixelMap, the default unit is px.| 2880| sh | number | Yes | Target height by which the source image is cropped.<br>If the type of **image** is ImageBitmap, the default unit is vp.<br>If the type of **image** is PixelMap, the default unit is px.| 2881| dx | number | Yes | X coordinate of the upper left corner of the drawing area on the canvas.<br>Default unit: vp| 2882| dy | number | Yes | Y coordinate of the upper left corner of the drawing area on the canvas.<br>Default unit: vp| 2883| dw | number | Yes | Width of the drawing area.<br>Default unit: vp| 2884| dh | number | Yes | Height of the drawing area.<br>Default unit: vp| 2885 2886 **Example** 2887 2888 ```ts 2889 // xxx.ets 2890 @Entry 2891 @Component 2892 struct DrawImage { 2893 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2894 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2895 private img:ImageBitmap = new ImageBitmap("common/images/example.jpg") 2896 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2897 build() { 2898 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2899 Canvas(this.context) 2900 .width('100%') 2901 .height('100%') 2902 .backgroundColor('#ffff00') 2903 .onReady(() => { 2904 let offContext = this.offCanvas.getContext("2d", this.settings) 2905 offContext.drawImage(this.img, 0, 0) 2906 offContext.drawImage(this.img, 0, 150, 300, 100) 2907 offContext.drawImage(this.img, 0, 0, 500, 500, 0, 300, 400, 200) 2908 let image = this.offCanvas.transferToImageBitmap() 2909 this.context.transferFromImageBitmap(image) 2910 }) 2911 } 2912 .width('100%') 2913 .height('100%') 2914 } 2915 } 2916 ``` 2917 2918  2919 2920 2921### createImageData 2922 2923createImageData(sw: number, sh: number): ImageData 2924 2925Creates an [ImageData](ts-components-canvas-imagedata.md) object with the same width and height of this **ImageData** object. This API involves time-consuming memory copy. Therefore, avoid frequent calls to it. The example is the same as that of **putImageData**. 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| sw | number | Yes | Width of the **ImageData** object.<br>Default unit: vp| 2938| sh | number | Yes | Height of the **ImageData** object.<br>Default unit: vp| 2939 2940 2941createImageData(imageData: ImageData): ImageData 2942 2943Creates an [ImageData](ts-components-canvas-imagedata.md) object by copying an existing **ImageData** object (without copying the image data). This API involves time-consuming memory copy. Therefore, avoid frequent calls to it. The example is the same as that of **putImageData**. 2944 2945**Widget capability**: This API can be used in ArkTS widgets since API version 9. 2946 2947 **Parameters** 2948 2949| Name | Type| Mandatory | Description| 2950| --------- | ---------------------------------------- | ---- | ---------------- | 2951| imagedata | [ImageData](ts-components-canvas-imagedata.md) | Yes | **ImageData** object to copy.| 2952 2953 **Return value** 2954 2955| Type | Description | 2956| ---------------------------------------- | ------------- | 2957| [ImageData](ts-components-canvas-imagedata.md) | New **ImageData** object.| 2958 2959### getPixelMap 2960 2961getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap 2962 2963Obtains 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. 2964 2965**Atomic service API**: This API can be used in atomic services since API version 11. 2966 2967**System capability**: SystemCapability.ArkUI.ArkUI.Full 2968 2969 **Parameters** 2970 2971| Name | Type | Mandatory | Description | 2972| ---- | ------ | ---- | --------------- | 2973| sx | number | Yes | X coordinate of the upper left corner of the output area.<br>Default unit: vp| 2974| sy | number | Yes | Y coordinate of the upper left corner of the output area.<br>Default unit: vp| 2975| sw | number | Yes | Width of the output area.<br>Default unit: vp| 2976| sh | number | Yes | Height of the output area.<br>Default unit: vp| 2977 2978**Return value** 2979 2980| Type | Description | 2981| ---------------------------------------- | ------------ | 2982| [PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) | **PixelMap** object.| 2983 2984**Example** 2985 2986 ```ts 2987 // xxx.ets 2988 @Entry 2989 @Component 2990 struct GetPixelMap { 2991 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2992 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2993 private img: ImageBitmap = new ImageBitmap("common/images/example.jpg") 2994 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2995 2996 build() { 2997 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2998 Canvas(this.context) 2999 .width('100%') 3000 .height('100%') 3001 .backgroundColor('#ffff00') 3002 .onReady(() => { 3003 let offContext = this.offCanvas.getContext("2d", this.settings) 3004 offContext.drawImage(this.img, 100, 100, 130, 130) 3005 let pixelmap = offContext.getPixelMap(150, 150, 130, 130) 3006 offContext.setPixelMap(pixelmap) 3007 let image = this.offCanvas.transferToImageBitmap() 3008 this.context.transferFromImageBitmap(image) 3009 }) 3010 } 3011 .width('100%') 3012 .height('100%') 3013 } 3014 } 3015 ``` 3016 3017  3018 3019### setPixelMap 3020 3021setPixelMap(value?: PixelMap): void 3022 3023Draws the input [PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) object on the canvas. The example is the same as that of **getPixelMap**. 3024 3025**Atomic service API**: This API can be used in atomic services since API version 11. 3026 3027**System capability**: SystemCapability.ArkUI.ArkUI.Full 3028 3029 **Parameters** 3030 3031| Name | Type | Mandatory | Description| 3032| ---- | ------ | ---- | --------------- | 3033| value | [PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) | No| **PixelMap** object that contains pixel values.<br>Default value: **null**| 3034 3035 3036### getImageData 3037 3038getImageData(sx: number, sy: number, sw: number, sh: number): ImageData 3039 3040Obtains 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. 3041 3042**Widget capability**: This API can be used in ArkTS widgets since API version 9. 3043 3044**Atomic service API**: This API can be used in atomic services since API version 11. 3045 3046**System capability**: SystemCapability.ArkUI.ArkUI.Full 3047 3048 **Parameters** 3049 3050| Name | Type | Mandatory| Description | 3051| ---- | ------ | ---- | --------------- | 3052| sx | number | Yes| X coordinate of the upper left corner of the output area.<br>Default unit: vp| 3053| sy | number | Yes| Y coordinate of the upper left corner of the output area.<br>Default unit: vp| 3054| sw | number | Yes| Width of the output area.<br>Default unit: vp| 3055| sh | number | Yes| Height of the output area.<br>Default unit: vp| 3056 3057 **Return value** 3058 3059| Type | Description | 3060| ---------------------------------------- | ------------- | 3061| [ImageData](ts-components-canvas-imagedata.md) | New **ImageData** object.| 3062 3063 3064**Example** 3065 3066 ```ts 3067 // xxx.ets 3068 @Entry 3069 @Component 3070 struct GetImageData { 3071 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3072 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3073 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 3074 private img:ImageBitmap = new ImageBitmap("/common/images/1234.png") 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.drawImage(this.img,0,0,130,130) 3085 let imagedata = offContext.getImageData(50,50,130,130) 3086 offContext.putImageData(imagedata,150,150) 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 3100### putImageData 3101 3102putImageData(imageData: ImageData, dx: number | string, dy: number | string): void 3103 3104Puts an **[ImageData](ts-components-canvas-imagedata.md)** object onto a rectangular area on the canvas. 3105 3106**Widget capability**: This API can be used in ArkTS widgets since API version 9. 3107 3108**Atomic service API**: This API can be used in atomic services since API version 11. 3109 3110**System capability**: SystemCapability.ArkUI.ArkUI.Full 3111 3112 **Parameters** 3113 3114| Name | Type| Mandatory| Description| 3115| ----------- | ---------------------------------------- | ---- | ----------------------------- | 3116| imagedata | Object | Yes| **ImageData** object with pixels to put onto the canvas.| 3117| dx | number \| string<sup>10+</sup> | Yes| X-axis offset of the rectangular area on the canvas.<br>Default unit: vp| 3118| dy | number \| string<sup>10+</sup> | Yes | Y-axis offset of the rectangular area on the canvas.<br>Default unit: vp| 3119 3120putImageData(imageData: ImageData, dx: number | string, dy: number | string, dirtyX: number | string, dirtyY: number | string, dirtyWidth?: number | string, dirtyHeight: number | string): void 3121 3122Puts an **[ImageData](ts-components-canvas-imagedata.md)** object onto a rectangular area on the canvas. 3123 3124**Widget capability**: This API can be used in ArkTS widgets since API version 9. 3125 3126**Atomic service API**: This API can be used in atomic services since API version 11. 3127 3128**System capability**: SystemCapability.ArkUI.ArkUI.Full 3129 3130 **Parameters** 3131 3132| Name | Type| Mandatory| Description| 3133| ----------- | ---------------------------------------- | ---- | ----------------------------- | 3134| imagedata | Object | Yes| **ImageData** object with pixels to put onto the canvas.| 3135| dx | number \| string<sup>10+</sup> | Yes| X-axis offset of the rectangular area on the canvas.<br>Default unit: vp| 3136| dy | number \| string<sup>10+</sup> | Yes | Y-axis offset of the rectangular area on the canvas.<br>Default unit: vp| 3137| dirtyX | number \| string<sup>10+</sup> | Yes | X-axis offset of the upper left corner of the rectangular area relative to that of the source image.<br>Default unit: vp| 3138| dirtyY | number \| string<sup>10+</sup> | Yes | Y-axis offset of the upper left corner of the rectangular area relative to that of the source image.<br>Default unit: vp| 3139| dirtyWidth | number \| string<sup>10+</sup> | Yes| Width of the rectangular area to crop the source image.<br>Default unit: vp| 3140| dirtyHeight | number \| string<sup>10+</sup> | Yes| Height of the rectangular area to crop the source image.<br>Default unit: vp| 3141 3142 **Example** 3143 3144 ```ts 3145 // xxx.ets 3146 @Entry 3147 @Component 3148 struct PutImageData { 3149 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3150 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3151 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 3152 3153 build() { 3154 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3155 Canvas(this.context) 3156 .width('100%') 3157 .height('100%') 3158 .backgroundColor('#ffff00') 3159 .onReady(() => { 3160 let offContext = this.offCanvas.getContext("2d", this.settings) 3161 let imageDataNum = offContext.createImageData(100, 100) 3162 let imageData = offContext.createImageData(imageDataNum) 3163 for (let i = 0; i < imageData.data.length; i += 4) { 3164 imageData.data[i + 0] = 255 3165 imageData.data[i + 1] = 0 3166 imageData.data[i + 2] = 255 3167 imageData.data[i + 3] = 255 3168 } 3169 offContext.putImageData(imageData, 10, 10) 3170 offContext.putImageData(imageData, 150, 10, 0, 0, 50, 50) 3171 let image = this.offCanvas.transferToImageBitmap() 3172 this.context.transferFromImageBitmap(image) 3173 }) 3174 } 3175 .width('100%') 3176 .height('100%') 3177 } 3178 } 3179 ``` 3180 3181  3182 3183### setLineDash 3184 3185setLineDash(segments: number[]): void 3186 3187Sets the dash line style. 3188 3189**Widget capability**: This API can be used in ArkTS widgets since API version 9. 3190 3191**Atomic service API**: This API can be used in atomic services since API version 11. 3192 3193**Parameters** 3194 3195| Name | Type | Mandatory | Description | 3196| -------- | -------- | -------- | ------------------- | 3197| segments | number[] | Yes| An array of numbers that specify distances to alternately draw a line and a gap.<br>Default unit: vp| 3198 3199**Example** 3200 3201 ```ts 3202 @Entry 3203 @Component 3204 struct SetLineDash { 3205 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3206 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3207 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 3208 3209 build() { 3210 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3211 Canvas(this.context) 3212 .width('100%') 3213 .height('100%') 3214 .backgroundColor('#ffff00') 3215 .onReady(() =>{ 3216 let offContext = this.offCanvas.getContext("2d", this.settings) 3217 offContext.arc(100, 75, 50, 0, 6.28) 3218 offContext.setLineDash([10,20]) 3219 offContext.stroke() 3220 let image = this.offCanvas.transferToImageBitmap() 3221 this.context.transferFromImageBitmap(image) 3222 }) 3223 } 3224 .width('100%') 3225 .height('100%') 3226 } 3227 } 3228 ``` 3229  3230 3231 3232### getLineDash 3233 3234getLineDash(): number[] 3235 3236Obtains the dash line style. 3237 3238**Widget capability**: This API can be used in ArkTS widgets since API version 9. 3239 3240**Atomic service API**: This API can be used in atomic services since API version 11. 3241 3242**Return value** 3243 3244| Type | Description | 3245| -------- | ------------------------ | 3246| number[] | Interval of alternate line segments and the length of spacing.<br>Default unit: vp| 3247 3248**Example** 3249 3250 ```ts 3251 // xxx.ets 3252 @Entry 3253 @Component 3254 struct OffscreenCanvasGetLineDash { 3255 @State message: string = 'Hello World' 3256 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3257 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3258 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 3259 build() { 3260 Row() { 3261 Column() { 3262 Text(this.message) 3263 .fontSize(50) 3264 .fontWeight(FontWeight.Bold) 3265 .onClick(()=>{ 3266 console.error('before getlinedash clicked') 3267 let offContext = this.offCanvas.getContext("2d", this.settings) 3268 let res = offContext.getLineDash() 3269 console.error(JSON.stringify(res)) 3270 }) 3271 Canvas(this.context) 3272 .width('100%') 3273 .height('100%') 3274 .backgroundColor('#ffff00') 3275 .onReady(() => { 3276 let offContext = this.offCanvas.getContext("2d", this.settings) 3277 offContext.arc(100, 75, 50, 0, 6.28) 3278 offContext.setLineDash([10,20]) 3279 offContext.stroke() 3280 let res = offContext.getLineDash() 3281 let image = this.offCanvas.transferToImageBitmap() 3282 this.context.transferFromImageBitmap(image) 3283 }) 3284 } 3285 .width('100%') 3286 } 3287 .height('100%') 3288 } 3289 } 3290 ``` 3291 3292 3293 3294 3295### toDataURL 3296 3297toDataURL(type?: string, quality?: any): string 3298 3299Creates a data URL that contains a representation of an image. This API involves time-consuming memory copy. Therefore, avoid frequent calls to it. 3300 3301**Widget capability**: This API can be used in ArkTS widgets since API version 9. 3302 3303**Atomic service API**: This API can be used in atomic services since API version 11. 3304 3305**System capability**: SystemCapability.ArkUI.ArkUI.Full 3306 3307**Parameters** 3308 3309| Name | Type | Mandatory | Description | 3310| ------- | ------ | ---- | ---------------------------------------- | 3311| type | string | No | Image format.<br>The options are as follows: "image/png", "image/jpeg", "image/webp".<br>Default value: **"image/png"** | 3312| 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.<br>Default value: **0.92**| 3313 3314**Return value** 3315 3316| Type | Description | 3317| ------ | --------- | 3318| string | Image URL.| 3319 3320**Example** 3321 3322 ```ts 3323 // xxx.ets 3324 @Entry 3325 @Component 3326 struct ToDataURL { 3327 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3328 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3329 private offCanvas: OffscreenCanvas = new OffscreenCanvas(100, 100) 3330 @State dataURL: string = "" 3331 3332 build() { 3333 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3334 Canvas(this.context) 3335 .width(100) 3336 .height(100) 3337 .onReady(() => { 3338 let offContext = this.offCanvas.getContext("2d", this.settings) 3339 offContext.fillRect(0,0,100,100) 3340 this.dataURL = offContext.toDataURL() 3341 }) 3342 Text(this.dataURL) 3343 } 3344 .width('100%') 3345 .height('100%') 3346 .backgroundColor('#ffff00') 3347 } 3348 } 3349 ``` 3350 3351 3352 3353### transferToImageBitmap 3354 3355transferToImageBitmap(): ImageBitmap 3356 3357Creates an **ImageBitmap** object from the most recently rendered image of the offscreen canvas. 3358 3359**Widget capability**: This API can be used in ArkTS widgets since API version 9. 3360 3361**Atomic service API**: This API can be used in atomic services since API version 11. 3362 3363**System capability**: SystemCapability.ArkUI.ArkUI.Full 3364 3365**Return value** 3366 3367| Type | Description | 3368| ---------------------------------------- | --------------- | 3369| [ImageBitmap](ts-components-canvas-imagebitmap.md) | Pixel data rendered on the offscreen canvas.| 3370 3371 3372 **Example** 3373 3374 ```ts 3375 // xxx.ets 3376 @Entry 3377 @Component 3378 struct PutImageData { 3379 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3380 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3381 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 3382 3383 build() { 3384 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3385 Canvas(this.context) 3386 .width('100%') 3387 .height('100%') 3388 .backgroundColor('#ffff00') 3389 .onReady(() =>{ 3390 let offContext = this.offCanvas.getContext("2d", this.settings) 3391 let imageData = offContext.createImageData(100, 100) 3392 for (let i = 0; i < imageData.data.length; i += 4) { 3393 imageData.data[i + 0] = 255 3394 imageData.data[i + 1] = 0 3395 imageData.data[i + 2] = 255 3396 imageData.data[i + 3] = 255 3397 } 3398 offContext.putImageData(imageData, 10, 10) 3399 let image = this.offCanvas.transferToImageBitmap() 3400 this.context.transferFromImageBitmap(image) 3401 }) 3402 } 3403 .width('100%') 3404 .height('100%') 3405 } 3406 } 3407 ``` 3408 3409 3410### restore 3411 3412restore(): void 3413 3414Restores the saved drawing context. 3415 3416> **NOTE** 3417> 3418> When the number of calls to **restore()** does not exceed the number of calls to **save()**, this API pops the saved drawing state from the stack and restores the properties, clipping path, and transformation matrix of the **CanvasRenderingContext2D** object.<br> 3419> If the number of calls to **restore()** exceeds the number of calls to **save()**, this API does nothing.<br> 3420> If there is no saved state, this API does nothing. 3421 3422**Widget capability**: This API can be used in ArkTS widgets since API version 9. 3423 3424**Atomic service API**: This API can be used in atomic services since API version 11. 3425 3426**System capability**: SystemCapability.ArkUI.ArkUI.Full 3427 3428 **Example** 3429 3430 ```ts 3431 // xxx.ets 3432 @Entry 3433 @Component 3434 struct CanvasExample { 3435 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3436 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3437 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 3438 3439 build() { 3440 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3441 Canvas(this.context) 3442 .width('100%') 3443 .height('100%') 3444 .backgroundColor('#ffff00') 3445 .onReady(() =>{ 3446 let offContext = this.offCanvas.getContext("2d", this.settings) 3447 offContext.save() // save the default state 3448 offContext.fillStyle = "#00ff00" 3449 offContext.fillRect(20, 20, 100, 100) 3450 offContext.restore() // restore to the default state 3451 offContext.fillRect(150, 75, 100, 100) 3452 let image = this.offCanvas.transferToImageBitmap() 3453 this.context.transferFromImageBitmap(image) 3454 }) 3455 } 3456 .width('100%') 3457 .height('100%') 3458 } 3459 } 3460 ``` 3461 3462 3463 3464### save 3465 3466save(): void 3467 3468Saves the current drawing context. 3469 3470**Widget capability**: This API can be used in ArkTS widgets since API version 9. 3471 3472**Atomic service API**: This API can be used in atomic services since API version 11. 3473 3474**System capability**: SystemCapability.ArkUI.ArkUI.Full 3475 3476 **Example** 3477 3478 ```ts 3479 // xxx.ets 3480 @Entry 3481 @Component 3482 struct CanvasExample { 3483 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3484 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3485 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 3486 3487 build() { 3488 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3489 Canvas(this.context) 3490 .width('100%') 3491 .height('100%') 3492 .backgroundColor('#ffff00') 3493 .onReady(() =>{ 3494 let offContext = this.offCanvas.getContext("2d", this.settings) 3495 offContext.save() // save the default state 3496 offContext.fillStyle = "#00ff00" 3497 offContext.fillRect(20, 20, 100, 100) 3498 offContext.restore() // restore to the default state 3499 offContext.fillRect(150, 75, 100, 100) 3500 let image = this.offCanvas.transferToImageBitmap() 3501 this.context.transferFromImageBitmap(image) 3502 }) 3503 } 3504 .width('100%') 3505 .height('100%') 3506 } 3507 } 3508 ``` 3509 3510 3511 3512### createLinearGradient 3513 3514createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient 3515 3516Creates a linear gradient. 3517 3518**Widget capability**: This API can be used in ArkTS widgets since API version 9. 3519 3520**Atomic service API**: This API can be used in atomic services since API version 11. 3521 3522**System capability**: SystemCapability.ArkUI.ArkUI.Full 3523 3524 **Parameters** 3525 3526| Name | Type | Mandatory | Description| 3527| ---- | ------ | ---- | -------- | 3528| x0 | number | Yes | X coordinate of the start point.<br>Default unit: vp| 3529| y0 | number | Yes | Y coordinate of the start point.<br>Default unit: vp| 3530| x1 | number | Yes | X coordinate of the end point.<br>Default unit: vp| 3531| y1 | number | Yes | Y coordinate of the end point.<br>Default unit: vp| 3532 3533**Return value** 3534 3535| Type | Description | 3536| ------ | --------- | 3537| [CanvasGradient](ts-components-canvas-canvasgradient.md) | New **CanvasGradient** object used to create a gradient on the offscreen canvas.| 3538 3539 **Example** 3540 3541 ```ts 3542 // xxx.ets 3543 @Entry 3544 @Component 3545 struct CreateLinearGradient { 3546 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3547 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3548 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 3549 3550 build() { 3551 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3552 Canvas(this.context) 3553 .width('100%') 3554 .height('100%') 3555 .backgroundColor('#ffff00') 3556 .onReady(() =>{ 3557 let offContext = this.offCanvas.getContext("2d", this.settings) 3558 let grad = offContext.createLinearGradient(50,0, 300,100) 3559 grad.addColorStop(0.0, '#ff0000') 3560 grad.addColorStop(0.5, '#ffffff') 3561 grad.addColorStop(1.0, '#00ff00') 3562 offContext.fillStyle = grad 3563 offContext.fillRect(0, 0, 400, 400) 3564 let image = this.offCanvas.transferToImageBitmap() 3565 this.context.transferFromImageBitmap(image) 3566 }) 3567 } 3568 .width('100%') 3569 .height('100%') 3570 } 3571 } 3572 ``` 3573 3574  3575 3576 3577### createRadialGradient 3578 3579createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient 3580 3581Creates a radial gradient. 3582 3583**Widget capability**: This API can be used in ArkTS widgets since API version 9. 3584 3585**Atomic service API**: This API can be used in atomic services since API version 11. 3586 3587**System capability**: SystemCapability.ArkUI.ArkUI.Full 3588 3589 **Parameters** 3590 3591| Name | Type | Mandatory | Description| 3592| ---- | ------ | ---- | ----------------- | 3593| x0 | number | Yes | X coordinate of the center of the start circle.<br>Default unit: vp| 3594| y0 | number | Yes | Y coordinate of the center of the start circle.<br>Default unit: vp| 3595| r0 | number | Yes | Radius of the start circle, which must be a non-negative finite number.<br>Default unit: vp| 3596| x1 | number | Yes | X coordinate of the center of the end circle.<br>Default unit: vp| 3597| y1 | number | Yes | Y coordinate of the center of the end circle.<br>Default unit: vp| 3598| r1 | number | Yes | Radius of the end circle, which must be a non-negative finite number.<br>Default unit: vp| 3599 3600**Return value** 3601 3602| Type | Description | 3603| ------ | --------- | 3604| [CanvasGradient](ts-components-canvas-canvasgradient.md) | New **CanvasGradient** object used to create a gradient on the offscreen canvas.| 3605 3606 **Example** 3607 3608 ```ts 3609 // xxx.ets 3610 @Entry 3611 @Component 3612 struct CreateRadialGradient { 3613 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3614 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3615 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 3616 3617 build() { 3618 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3619 Canvas(this.context) 3620 .width('100%') 3621 .height('100%') 3622 .backgroundColor('#ffff00') 3623 .onReady(() =>{ 3624 let offContext = this.offCanvas.getContext("2d", this.settings) 3625 let grad = offContext.createRadialGradient(200,200,50, 200,200,200) 3626 grad.addColorStop(0.0, '#ff0000') 3627 grad.addColorStop(0.5, '#ffffff') 3628 grad.addColorStop(1.0, '#00ff00') 3629 offContext.fillStyle = grad 3630 offContext.fillRect(0, 0, 440, 440) 3631 let image = this.offCanvas.transferToImageBitmap() 3632 this.context.transferFromImageBitmap(image) 3633 }) 3634 } 3635 .width('100%') 3636 .height('100%') 3637 } 3638 } 3639 ``` 3640 3641  3642 3643### createConicGradient<sup>10+</sup> 3644 3645createConicGradient(startAngle: number, x: number, y: number): CanvasGradient 3646 3647Creates a conic gradient. 3648 3649**Atomic service API**: This API can be used in atomic services since API version 11. 3650 3651**System capability**: SystemCapability.ArkUI.ArkUI.Full 3652 3653**Parameters** 3654 3655| Name| Type| Mandatory| Description| 3656| ---------- | ------ | ---- | ----------------------------------- | 3657| startAngle | number | Yes| Angle at which the gradient starts. The angle measurement starts horizontally from the right side of the center and moves clockwise.<br>Unit: radian| 3658| x | number | Yes| X coordinate of the center of the conic gradient.<br>Default unit: vp| 3659| y | number | Yes| Y coordinate of the center of the conic gradient.<br>Default unit: vp| 3660 3661**Return value** 3662 3663| Type | Description | 3664| ------ | --------- | 3665| [CanvasGradient](ts-components-canvas-canvasgradient.md) | New **CanvasGradient** object used to create a gradient on the offscreen canvas.| 3666 3667**Example** 3668 3669```ts 3670// xxx.ets 3671@Entry 3672@Component 3673struct OffscreenCanvasConicGradientPage { 3674 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3675 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3676 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 3677 3678 build() { 3679 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3680 Canvas(this.context) 3681 .width('100%') 3682 .height('100%') 3683 .backgroundColor('#ffffff') 3684 .onReady(() =>{ 3685 let offContext = this.offCanvas.getContext("2d", this.settings) 3686 let grad = offContext.createConicGradient(0, 50, 80) 3687 grad.addColorStop(0.0, '#ff0000') 3688 grad.addColorStop(0.5, '#ffffff') 3689 grad.addColorStop(1.0, '#00ff00') 3690 offContext.fillStyle = grad 3691 offContext.fillRect(0, 30, 100, 100) 3692 let image = this.offCanvas.transferToImageBitmap() 3693 this.context.transferFromImageBitmap(image) 3694 }) 3695 } 3696 .width('100%') 3697 .height('100%') 3698 } 3699} 3700``` 3701 3702  3703
