В чём причина «Uncaught TypeError: Cannot read properties of null (reading 'getContext')»?

Question

[nkochnevss]

Видел много видео и статей на подобие как сделать paint в html форме, но я хочу сделать это во vue и все никак не могу разобраться.
Код ниже написан в файле page, который импортируется в app.vue.
Возникает ошибка:

Uncaught TypeError: Cannot read properties of null (reading 'getContext')

<canvas id="myCanvas" class="signature" width="900" height="600"></canvas>

var canvas = document.getElementById("myCanvas"); 
	var context = canvas.getContext("2d");

	canvas.onmousedown = function (){
		canvas.onmousemove = function (event){
			var x = event.offsetX;
			var y = event.offsetY;
			context.fillRect(x-5, y-5, 5, 5);
		}
		canvas.onmouseup = function (){
			canvas.onmousemove = null;
		}
	}

Comments

[modelair]

покажите весь шаблон

[Вадим]

в чем ошибка

Cannot read properties of null (reading 'getContext')

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

Ну очевидно, что getElement не нашёл такого элемента и вернул null у которого Вы пытаетесь вызвать getContext().
Чёрным по белому же..

[iljaGolubev]

var canvas = document.getElementById("myCanvas")...
ведь в правильный момент вызывается?

Answer 1

[modelair]

<script setup>
onMounted(() => {
    let canvas= document.getElementById("myCanvas") 
    let context = canvas?.getContext("2d")
    canvas.onmousedown = function (){
        canvas.onmousemove = function (event){
            let x = event.offsetX
            let y = event.offsetY
            context.fillRect(x-5, y-5, 5, 5)
        }
        canvas.onmouseup = function (){
            canvas.onmousemove = null
        }
    }
})
</script>

вообще такой код пишется проще:

<canvas 
    @mousedown="canvasMouseDowned = true"
    @mousemove="canvasMouseMove"
    @mouseup="canvasMouseDowned = false"
     class="signature"
     width="900"
     height="600"
/>

<script setup lang="ts">
const canvasMouseDowned = ref(false)

function canvasMouseMove(event: MouseEvent) {
    if (!canvasMouseDowned.value) return
    let x = event.offsetX
    let y = event.offsetY
    if (event.target) {
        let context = (event.target as HTMLCanvasElement).getContext('2d')
        context?.fillRect(x-5, y-5, 5, 5)
    }

}