1# CanvasPattern
2
3**CanvasPattern** represents an object, created by the [createPattern](ts-canvasrenderingcontext2d.md#createpattern) API, describing an image filling pattern based on the image and repetition mode.
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## Methods
10
11### setTransform
12
13setTransform(transform?: Matrix2D): void
14
15Uses a **Matrix2D** object as a parameter to perform matrix transformation on the current **CanvasPattern** object.
16
17**Widget capability**: This API can be used in ArkTS widgets since API version 9.
18
19**Atomic service API**: This API can be used in atomic services since API version 11.
20
21**System capability**: SystemCapability.ArkUI.ArkUI.Full
22
23**Parameters**
24
25| Name     | Type | Mandatory| Description  |
26| --------- | -------------- | ------ | ---------- |
27| transform | [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | No | Transformation matrix.<br>Default value: **null**|
28
29**Example**
30
31```ts
32// xxx.ets
33@Entry
34@Component
35struct CanvasPatternPage {
36  private settings: RenderingContextSettings = new RenderingContextSettings(true)
37  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
38  private matrix: Matrix2D = new Matrix2D()
39  private img: ImageBitmap = new ImageBitmap("common/pattern.jpg")
40  private pattern : CanvasPattern | null = null
41
42  build() {
43      Column() {
44        Button("Click to set transform")
45          .onClick(() => {
46            this.matrix.scaleY = 1
47            this.matrix.scaleX = 1
48            this.matrix.translateX = 50
49            this.matrix.translateY = 200
50            if (this.pattern) {
51              this.pattern.setTransform(this.matrix)
52            }
53            this.context.fillRect(0, 0, 480, 720)
54          })
55          .width("45%")
56          .margin("5px")
57        Canvas(this.context)
58          .width('100%')
59          .height('80%')
60          .backgroundColor('#FFFFFF')
61          .onReady(() => {
62            this.pattern = this.context.createPattern(this.img, 'no-repeat')
63            this.matrix.scaleY = 0.5
64            this.matrix.scaleX = 0.5
65            this.matrix.translateX = 50
66            this.matrix.translateY = 50
67            if (this.pattern) {
68              this.context.fillStyle = this.pattern
69              this.pattern.setTransform(this.matrix)
70            }
71            this.context.fillRect(0, 0, 480, 720)
72          })
73      }
74      .width('100%')
75      .height('100%')
76  }
77}
78```
79
80![CanvasPattern](./figures/canvas_pattern.gif)
81