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