How can I access and utilize the ctx variable from the initGrid() function in the drawGrid() function? Despite trying to use "this," it seems that the variable cannot be accessed within the drawGrid() function.
<script>
export default {
data: () => ({
width: 1200,
height: 800,
squareH: 15,
squareW: 15,
squareRow: 10,
squareCol: 10,
squares: [],
}),
directives: {},
methods: {
initGrid() {
let grid = document.getElementById('grid');
var ctx = grid.getContext('2d');
},
drawGrid() {
this.ctx.fillStyle = 'black';
this.ctx.fillRect(10, 10, this.squareW, this.squareH);
}
},
mounted() {
this.initGrid();
this.drawGrid();
}