1 files changed, 17 insertions, 5 deletions
diff --git a/src/client/components/page/page.canvas.vue b/src/client/components/page/page.canvas.vue
index d3bf5c1de6..8f49b88e5e 100644
--- a/src/client/components/page/page.canvas.vue
+++ b/src/client/components/page/page.canvas.vue
@@ -1,24 +1,36 @@
 <template>
 <div class="ysrxegms">
-	<canvas ref="canvas" :width="value.width" :height="value.height"/>
+	<canvas ref="canvas" :width="block.width" :height="block.height"/>
 </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, onMounted, PropType, Ref, ref } from 'vue';
 import * as os from '@/os';
+import { CanvasBlock } from '@/scripts/hpml/block';
+import { Hpml } from '@/scripts/hpml/evaluator';
 
 export default defineComponent({
 	props: {
-		value: {
+		block: {
+			type: Object as PropType<CanvasBlock>,
 			required: true
 		},
 		hpml: {
+			type: Object as PropType<Hpml>,
 			required: true
 		}
 	},
-	mounted() {
-		this.hpml.registerCanvas(this.value.name, this.$refs.canvas);
+	setup(props, ctx) {
+		const canvas: Ref<any> = ref(null);
+
+		onMounted(() => {
+			props.hpml.registerCanvas(props.block.name, canvas.value);
+		});
+
+		return {
+			canvas
+		};
 	}
 });
 </script>