diff --git a/playground/public/1.png b/playground/public/1.png
new file mode 100644
index 0000000..0fb7cfb
Binary files /dev/null and b/playground/public/1.png differ
diff --git a/playground/src/App.vue b/playground/src/App.vue
index 8475b30..4cc463b 100644
--- a/playground/src/App.vue
+++ b/playground/src/App.vue
@@ -1,25 +1,13 @@
 <template>
-  <canvas></canvas>
-  <video-demo></video-demo>
+  <text-demo></text-demo>
+  <div style="display: flex; justify-content: space-between; margin-top: 10px;">
+    <image-demo></image-demo>
+    <video-demo></video-demo>
+  </div>
 </template>
 
 <script setup>
-import { createTextImage } from '@sunny-117/text-image';
+import TextDemo from './TextDemo.vue'
+import ImageDemo from './ImageDemo.vue'
 import VideoDemo from './VideoDemo.vue'
-import {onMounted} from 'vue';
-
-onMounted(() => {
-  createTextImage({
-    canvas: document.querySelector('canvas'),
-    source: {
-      text: 'Text Image',
-    },
-  });
-})
-</script>
-
-<style scoped>
-.titleBox {
-  background-color: blueviolet;
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/playground/src/ImageDemo.vue b/playground/src/ImageDemo.vue
new file mode 100644
index 0000000..71bdf9f
--- /dev/null
+++ b/playground/src/ImageDemo.vue
@@ -0,0 +1,23 @@
+<template>
+  <canvas id="canvas2"></canvas>
+</template>
+
+<script setup>
+import { createTextImage } from "@sunny-117/text-image";
+import { onMounted } from "vue";
+
+onMounted(() => {
+  const canvas = document.querySelector("#canvas2");
+  console.log(canvas)
+  createTextImage({
+    canvas,
+    raduis: 7,
+    isGray: true,
+    source: {
+      img: "../public/1.png",
+      width: 800,
+      height: 700,
+    },
+  });
+});
+</script>
diff --git a/playground/src/TextDemo.vue b/playground/src/TextDemo.vue
new file mode 100644
index 0000000..51fff2f
--- /dev/null
+++ b/playground/src/TextDemo.vue
@@ -0,0 +1,25 @@
+<template>
+  <canvas id="canvas1" style="width: 1000px;margin: 0 auto;"></canvas>
+</template>
+
+<script setup>
+import { createTextImage } from "@sunny-117/text-image";
+import { onMounted } from "vue";
+
+onMounted(() => {
+  createTextImage({
+    canvas: document.querySelector("#canvas1"),
+    source: {
+      text: "Text Image",
+      width: 500,
+      height: 300,
+    },
+  });
+});
+</script>
+
+<style scoped>
+.titleBox {
+  background-color: blueviolet;
+}
+</style>
diff --git a/playground/src/VideoDemo.vue b/playground/src/VideoDemo.vue
index 4e6774a..6905d41 100644
--- a/playground/src/VideoDemo.vue
+++ b/playground/src/VideoDemo.vue
@@ -1,16 +1,17 @@
 <template>
-  <canvas id="can1"></canvas>
-  <canvas id="can2"></canvas>
+  <canvas id="canvas3"></canvas>
 </template>
 <script setup>
 import { onMounted } from "vue";
 import { createTextImage } from "@sunny-117/text-image";
 onMounted(() => {
   createTextImage({
-    canvas: document.querySelector("#can1"),
+    canvas: document.querySelector("#canvas3"),
     replaceText: "6",
     source: {
       video: "../public/1.mp4",
+      width: 500,
+      height: 700,
     },
   });
 });
diff --git a/playground/src/assets/1.mp4 b/playground/src/assets/1.mp4
new file mode 100644
index 0000000..e1af905
Binary files /dev/null and b/playground/src/assets/1.mp4 differ
diff --git a/playground/src/index.css b/playground/src/index.css
new file mode 100644
index 0000000..f9688c7
--- /dev/null
+++ b/playground/src/index.css
@@ -0,0 +1,3 @@
+body {
+    overflow: hidden;
+}
\ No newline at end of file
diff --git a/playground/src/main.ts b/playground/src/main.ts
index 2425c0f..fcf8833 100644
--- a/playground/src/main.ts
+++ b/playground/src/main.ts
@@ -1,5 +1,4 @@
 import { createApp } from 'vue'
-import './style.css'
 import App from './App.vue'
-
+import './index.css'
 createApp(App).mount('#app')
diff --git a/playground/src/style.css b/playground/src/style.css
deleted file mode 100644
index bb131d6..0000000
--- a/playground/src/style.css
+++ /dev/null
@@ -1,79 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}