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