In my typescript code base, I have successfully created a Sudoku board by directly manipulating the DOM and utilizing an HTML Canvas element with its API.
Now, I am looking to elevate my project to a full website and integrate what I have into a Vue3 project. I am employing the Composition API alongside typescript. Although I have made progress, I am currently stuck on a board refresh issue.
Below is the initial code snippet for my Board Component:
<template>
<button @click="grow">Grow</button>
<br><br>
<div class="board">
<canvas ref='myCanvas' :width="size.w" :height="size.h" tabindex='0' style="border:1px solid #000000;"></canvas>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, reactive } from 'vue'
import { CanvasManager } from '@/managers/canvasmanager'
export default defineComponent({
setup() {
let myCanvas = ref(null)
let myContext = ref(null)
let manager = ref(null)
let size = reactive({
w: 200,
h: 200
})
function grow() {
size.w += 10
size.h += 10
manager.drawGrid(4, 4, 1, 'black')
}
onMounted(() => {
myContext = myCanvas.value.getContext('2d')
manager = new CanvasManager(myContext, size.w, size.h)
manager.drawGrid(4, 4, 1, 'black')
})
return {
myCanvas,
size,
grow
}
}
})
</script>
The imported CanvasManager class is a utility that contains various drawing helpers using the Canvas API.
The current code functions correctly upon initial load. The call to
manager.drawGrid(4, 4, 1, 'black')onMounted successfully draws a 4x4 grid on the canvas.
However, when the grow method is called to increase the canvas size, although the border expands visibly, the subsequent call to
manager.drawGrid(4, 4, 1, 'black')I am relatively new to using Vue (any version) and would appreciate any guidance on how to tackle this debugging challenge.
No errors appear in the console. I have added console logs to the drawGrid method in CanvasManager and confirmed that it is indeed being triggered.
Any assistance you can provide would be greatly valued.
Thank you!