<template>
	<view class="page">
		<view class="canvas_box pos_r">
			<view class="tc p20 titlebar">canvas演示</view>
			<!-- <canvas id="canvasId" class="canvas" /> -->
			<div id="game-container" class="bg_ff"></div>
		</view>
	</view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import Page from "../../libs/pages/Page";

const title = ref("Hello");
let stage;

const init = () => {
	let gameContainer: any = document.getElementById("game-container");
	let sysinfo = uni.getSystemInfoSync();
	console.log("#debug#🚀 ~ file: index.vue:22 ~ init ~ sysinfo:", sysinfo);

	gameContainer.style.height = sysinfo.safeArea?.height + "px";
	gameContainer.style.width = sysinfo.safeArea?.right + "px";
};

onLoad(async () => {
	await Page.Yc.delay(1000);
	init();
});
</script>

<style lang="scss" scoped>
.page {
	.titlebar {
		position: absolute;
		width: 100%;
		left: 0;
		top: 0;
	}
}
</style>
