feat: CanvasDEMO

src/.vuepress/client.ts

@@ -19,6 +19,16 @@ import DrawRectangle from "./components/Canvas/DrawRectangle.vue";
 import DrawText from "./components/Canvas/DrawText.vue";
 import PlayVideo from "./components/Canvas/PlayVideo.vue";
 import Screenshot from "./components/Canvas/Screenshot.vue";
+import CanvasComposition from "./components/CanvasBasic/CanvasComposition.vue";
+import CanvasGradient from "./components/CanvasBasic/CanvasGradient.vue";
+import DrawCircle from "./components/CanvasBasic/DrawCircle.vue";
+import DrawGraphics from "./components/CanvasBasic/DrawGraphics.vue";
+import DrawImage from "./components/CanvasBasic/DrawImage.vue";
+import DrawLine from "./components/CanvasBasic/DrawLine.vue";
+import DrawRectangle from "./components/CanvasBasic/DrawRectangle.vue";
+import DrawText from "./components/CanvasBasic/DrawText.vue";
+import PlayVideo from "./components/CanvasBasic/PlayVideo.vue";
+import Screenshot from "./components/CanvasBasic/Screenshot.vue";
 import DicePractice from "./components/FlexLayout/DicePractice.vue";
 import HolyGrailLayout from "./components/FlexLayout/HolyGrailLayout.vue";
 import ResponsivePage from "./components/FlexLayout/ResponsivePage.vue";
@@ -67,6 +77,16 @@ app.component("DrawRectangle", DrawRectangle);
 app.component("DrawText", DrawText);
 app.component("PlayVideo", PlayVideo);
 app.component("Screenshot", Screenshot);
+app.component("CanvasComposition", CanvasComposition);
+app.component("CanvasGradient", CanvasGradient);
+app.component("DrawCircle", DrawCircle);
+app.component("DrawGraphics", DrawGraphics);
+app.component("DrawImage", DrawImage);
+app.component("DrawLine", DrawLine);
+app.component("DrawRectangle", DrawRectangle);
+app.component("DrawText", DrawText);
+app.component("PlayVideo", PlayVideo);
+app.component("Screenshot", Screenshot);
 app.component("DicePractice", DicePractice);
 app.component("HolyGrailLayout", HolyGrailLayout);
 app.component("ResponsivePage", ResponsivePage);

src/.vuepress/components/Canvas/PlayVideo.vue

@@ -10,18 +10,20 @@ import useHtml from "@hooks/useHtml.js";
 const el = ref();
 
 onMounted(async () => {
-  const { html, css,  } = await useHtml("/demo/Canvas/PlayVideo.html");
+  const { html, css, js } = await useHtml("/demo/Canvas/PlayVideo.html");
 
   new MiniSandbox({
     el: el.value,
     files: {
       "index.html": {
         defaultValue: html,
         
-        
+        jsLibs: ["index.js"],
       },
       
-      
+      "index.js": {
+        defaultValue: js,
+      },
     },
     defaultConfig: {
       height: "500px",

src/.vuepress/components/Canvas/Screenshot.vue

@@ -10,18 +10,22 @@ import useHtml from "@hooks/useHtml.js";
 const el = ref();
 
 onMounted(async () => {
-  const { html, css,  } = await useHtml("/demo/Canvas/Screenshot.html");
+  const { html, css, js } = await useHtml("/demo/Canvas/Screenshot.html");
 
   new MiniSandbox({
     el: el.value,
     files: {
       "index.html": {
         defaultValue: html,
-        
-        
+        cssLibs: ["index.css"],
+        jsLibs: ["index.js"],
+      },
+      "index.css": {
+        defaultValue: css,
+      },
+      "index.js": {
+        defaultValue: js,
       },
-      
-      
     },
     defaultConfig: {
       height: "500px",

src/.vuepress/components/CanvasBasic/CanvasComposition.vue

@@ -0,0 +1,35 @@
+
+<template>
+  <div ref="el"></div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import useHtml from "@hooks/useHtml.js";
+
+const el = ref();
+
+onMounted(async () => {
+  const { html, css, js } = await useHtml("/demo/CanvasBasic/CanvasComposition.html");
+
+  new MiniSandbox({
+    el: el.value,
+    files: {
+      "index.html": {
+        defaultValue: html,
+        cssLibs: ["index.css"],
+        jsLibs: ["index.js"],
+      },
+      "index.css": {
+        defaultValue: css,
+      },
+      "index.js": {
+        defaultValue: js,
+      },
+    },
+    defaultConfig: {
+      height: "500px",
+    },
+  });
+});
+</script>

src/.vuepress/components/CanvasBasic/CanvasGradient.vue

@@ -0,0 +1,35 @@
+
+<template>
+  <div ref="el"></div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import useHtml from "@hooks/useHtml.js";
+
+const el = ref();
+
+onMounted(async () => {
+  const { html, css, js } = await useHtml("/demo/CanvasBasic/CanvasGradient.html");
+
+  new MiniSandbox({
+    el: el.value,
+    files: {
+      "index.html": {
+        defaultValue: html,
+        cssLibs: ["index.css"],
+        jsLibs: ["index.js"],
+      },
+      "index.css": {
+        defaultValue: css,
+      },
+      "index.js": {
+        defaultValue: js,
+      },
+    },
+    defaultConfig: {
+      height: "500px",
+    },
+  });
+});
+</script>

src/.vuepress/components/CanvasBasic/DrawCircle.vue

@@ -0,0 +1,35 @@
+
+<template>
+  <div ref="el"></div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import useHtml from "@hooks/useHtml.js";
+
+const el = ref();
+
+onMounted(async () => {
+  const { html, css, js } = await useHtml("/demo/CanvasBasic/DrawCircle.html");
+
+  new MiniSandbox({
+    el: el.value,
+    files: {
+      "index.html": {
+        defaultValue: html,
+        cssLibs: ["index.css"],
+        jsLibs: ["index.js"],
+      },
+      "index.css": {
+        defaultValue: css,
+      },
+      "index.js": {
+        defaultValue: js,
+      },
+    },
+    defaultConfig: {
+      height: "500px",
+    },
+  });
+});
+</script>

src/.vuepress/components/CanvasBasic/DrawGraphics.vue

@@ -0,0 +1,35 @@
+
+<template>
+  <div ref="el"></div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import useHtml from "@hooks/useHtml.js";
+
+const el = ref();
+
+onMounted(async () => {
+  const { html, css, js } = await useHtml("/demo/CanvasBasic/DrawGraphics.html");
+
+  new MiniSandbox({
+    el: el.value,
+    files: {
+      "index.html": {
+        defaultValue: html,
+        cssLibs: ["index.css"],
+        jsLibs: ["index.js"],
+      },
+      "index.css": {
+        defaultValue: css,
+      },
+      "index.js": {
+        defaultValue: js,
+      },
+    },
+    defaultConfig: {
+      height: "500px",
+    },
+  });
+});
+</script>

src/.vuepress/components/CanvasBasic/DrawImage.vue

@@ -0,0 +1,35 @@
+
+<template>
+  <div ref="el"></div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import useHtml from "@hooks/useHtml.js";
+
+const el = ref();
+
+onMounted(async () => {
+  const { html, css, js } = await useHtml("/demo/CanvasBasic/DrawImage.html");
+
+  new MiniSandbox({
+    el: el.value,
+    files: {
+      "index.html": {
+        defaultValue: html,
+        cssLibs: ["index.css"],
+        jsLibs: ["index.js"],
+      },
+      "index.css": {
+        defaultValue: css,
+      },
+      "index.js": {
+        defaultValue: js,
+      },
+    },
+    defaultConfig: {
+      height: "500px",
+    },
+  });
+});
+</script>

src/.vuepress/components/CanvasBasic/DrawLine.vue

@@ -0,0 +1,35 @@
+
+<template>
+  <div ref="el"></div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import useHtml from "@hooks/useHtml.js";
+
+const el = ref();
+
+onMounted(async () => {
+  const { html, css, js } = await useHtml("/demo/CanvasBasic/DrawLine.html");
+
+  new MiniSandbox({
+    el: el.value,
+    files: {
+      "index.html": {
+        defaultValue: html,
+        cssLibs: ["index.css"],
+        jsLibs: ["index.js"],
+      },
+      "index.css": {
+        defaultValue: css,
+      },
+      "index.js": {
+        defaultValue: js,
+      },
+    },
+    defaultConfig: {
+      height: "500px",
+    },
+  });
+});
+</script>

src/.vuepress/components/CanvasBasic/DrawRectangle.vue

@@ -0,0 +1,35 @@
+
+<template>
+  <div ref="el"></div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import useHtml from "@hooks/useHtml.js";
+
+const el = ref();
+
+onMounted(async () => {
+  const { html, css, js } = await useHtml("/demo/CanvasBasic/DrawRectangle.html");
+
+  new MiniSandbox({
+    el: el.value,
+    files: {
+      "index.html": {
+        defaultValue: html,
+        cssLibs: ["index.css"],
+        jsLibs: ["index.js"],
+      },
+      "index.css": {
+        defaultValue: css,
+      },
+      "index.js": {
+        defaultValue: js,
+      },
+    },
+    defaultConfig: {
+      height: "500px",
+    },
+  });
+});
+</script>

src/.vuepress/components/CanvasBasic/DrawText.vue

@@ -0,0 +1,35 @@
+
+<template>
+  <div ref="el"></div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import useHtml from "@hooks/useHtml.js";
+
+const el = ref();
+
+onMounted(async () => {
+  const { html, css, js } = await useHtml("/demo/CanvasBasic/DrawText.html");
+
+  new MiniSandbox({
+    el: el.value,
+    files: {
+      "index.html": {
+        defaultValue: html,
+        cssLibs: ["index.css"],
+        jsLibs: ["index.js"],
+      },
+      "index.css": {
+        defaultValue: css,
+      },
+      "index.js": {
+        defaultValue: js,
+      },
+    },
+    defaultConfig: {
+      height: "500px",
+    },
+  });
+});
+</script>