1# ArkUI Subsystem Changelog
2
3## cl.arkui.1 Change in the Priority of alignContent and align Attributes for the \<Stack> Component
4
5Changed the priority of **alignContent** and **align** as follows:
6
7API version 9 and earlier: The universal attribute **align** prevails.
8
9API version 10 and later: The last set attribute prevails.
10
11When two attributes provide the same functions, the last set attribute takes effect. This rule applies to **alignContent** and **align**, both of which set the alignment mode when used for the **\<Stack>** component.
12
13**Example**
14```ts
15// xxx.ets
16@Entry
17@Component
18struct StackExample {
19  build() {
20    Stack({alignContent:Alignment.Start}){
21      Text("Stack's child").backgroundColor(Color.Brown).height("100").width(100)
22    }
23    .width(300).height(300)
24    .backgroundColor(Color.Pink)
25    .align(Alignment.Center)
26    .alignContent(Alignment.TopEnd)
27  }
28}
29```
30
31API version 9 and earlier: Child components are arranged based on the universal attribute **align**.
32
33![stack](figures/api9.png)
34
35
36API version 10 and later: Child components are arranged based on the **alignContent** attribute, which is set at a later time than **align**.
37
38![stack](figures/api10_and_later.png)
39
40**Change Impact**
41
42When both **alignContent** and **align** attributes are set, the last set attribute prevails.
43
44## cl.arkui.2 Behavior Change of the fillText and strokeText APIs of the \<Canvas> Component
45
46
47When the **fillText** and **strokeText** APIs are used to draw text, no text wrapping occurs.
48
49**Example**
50```ts
51// xxx.ets
52@Entry
53@Component
54struct FillText {
55  private settings: RenderingContextSettings = new RenderingContextSettings(true)
56  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
57
58  build() {
59    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
60      Canvas(this.context)
61        .width('100%')
62        .height('100%')
63        .backgroundColor('#ffff00')
64        .onReady(() =>{
65          this.context.font = '50px sans-serif'
66          this.context.fillText("Hello World!", 0, 100)
67          this.context.fillText("Hello World! This is a long string to fully show", 0, 150)
68          this.context.strokeText("Hello World!", 0, 250)
69          this.context.strokeText("Hello World! This is a long string to fully show", 0, 300)
70        })
71    }
72    .width('100%')
73    .height('100%')
74  }
75}
76```
77
78API version 9 and earlier: When the **fillText** and **strokeText** APIs are used to draw text, the text is wrapped based on the component width.
79
80![stack](figures/api9filltext.jpeg)
81
82API version 10 and later: When the **fillText** and **strokeText** APIs are used to draw text, no text wrapping occurs.
83
84![stack](figures/api10filltext.jpeg)
85
86**Change Impact**
87
88The text appearance is affected now that the text is not wrapped based on the component width.
89