<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillReact(0, 0, 600, 400);
pincel.fillStyle = 'lightgrey'
</script>
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillReact(0, 0, 600, 400);
pincel.fillStyle = 'lightgrey'
</script>
Olá Arthur,
Esse erro está ocorrendo porque a função fillRect foi escrita de maneira errada:
troque:
pincel.fillReact(0, 0, 600, 400);
por:
pincel.fillRect(0, 0, 600, 400);
O código completo ficará da seguinte forma:
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillRect(0, 0, 600, 400);
pincel.fillStyle = 'lightgrey'
</script>
Olá, fiz um post pedindo ajuda, mas acabei de descobrir a solução. Manterei o post aqui, porque outros podem vir a ter o mesmo problema. No código abaixo, o 2D (maiúsculo) deveria ser 2d (minúsculo), por isso, dava erro. O interessante é que o JS não aponta exatamente este erro na console.
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2D');
pincel.fillRect(0, 0, 600, 400);
</script>
E este é o erro que estou recebendo na Console:
Uncaught TypeError: Cannot read property 'fillRect' of null at programa.html:10