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