update readme

packages/omi-canvas/README.md

@@ -12,6 +12,11 @@ import 'omi-canvas'
 import omiUrl from './omi.jpg'
 
 define('my-app', class extends WeElement {
+  static observe = true
+
+  data = {
+    scale: 0.5
+  }
 
   css() {
     return `
@@ -20,18 +25,15 @@ define('my-app', class extends WeElement {
         }`
   }
 
-  onClick = (evt)=> {
-    this.data.scale = 0.55
+  onClick = (evt) => {
+    this.data.scale = 0.5 + Math.random() * 0.1
   }
 
   render() {
     return (
       <div>
         <h1>Omi</h1>
-        <omi-canvas 
-          width={400} 
-          height={400}
-          css='border: 1px solid #ccc;'>
+        <omi-canvas width={400} height={400} css='border: 1px solid #ccc;'>
           <text
             text='Hello omi-canvas'
             font='30px Segoe UI'
@@ -48,6 +50,15 @@ define('my-app', class extends WeElement {
             x={130}
             y={140}
           />
+          <group alpha={0.5} y={270}>
+            <text
+              text='I am in a group.'
+              font='30px Segoe UI'
+              color='#ff7700'
+              baseline='top'
+              x={80}
+            />
+          </group>
         </omi-canvas>
       </div>
     )
@@ -59,7 +70,7 @@ render(<my-app />, 'body')
 
 The effect shown below:
 
-![](./assets/omi-canvas.jpg)
+![](./assets/omi-canvas2.jpg)
 
 ## Property