<canvas id ="tela" width= "600" height = "400"></canvas>
<script>
var tela = document.querySelector("tela");
var pincel = tela.getContext("2d");
pincel.fillStyle="lightgrey";
pincel.fillRect(0, 0, 200, 400);
</script>
Solucionado
<canvas id ="tela" width= "600" height = "400"></canvas>
<script>
var tela = document.querySelector("tela");
var pincel = tela.getContext("2d");
pincel.fillStyle="lightgrey";
pincel.fillRect(0, 0, 200, 400);
</script>hoje, com a Alura e o Google Gemini
Oi Lucas, meu aluno. Tudo bem?
Eu sei onde esta o problema do seu código. Vou explicar, ok?
Esta nessa linha:
var tela = document.querySelector("tela");Toda vez que seu código não funcionar, dê uma olhada no console do seu navegador por mensagens de erro. Lá eu encontrei fazendo um teste:
Uncaught TypeError: Cannot read property 'getContext' of null
at teste.html:4Quando usamos document.querySelector, precisamos passar um seletor CSS. No caso, como canvas é identificado pelo id tela, no querySelector você tem que usar #tela.
Sendo assim, o código correto é:
var tela = document.querySelector("#tela");Sucesso e bom estudo meu aluno!
Flavio, muito obrigado!
Opa, imagina! Quero encontra-lo ainda esse ano nos cursos avançados! :)
Sucesso e bom estudo meu aluno!
Olá Flávio!
Eu também obtive a mesma resposta do navegador, porém no meu caso ele não consegue ler o tipo de conteúdo que quero inserir.
No arquivo canvas.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas/title>
<script type="text/javascript" src="../js/canvas.js"></script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300"></canvas>
</body>
</html>E no arquivo canvas.js
var tela = document.getElementById("myCanvas");
var pincel = tela.getContext("2d");
pincel.fillRect(0, 0, 300, 300);
console.log(pincel);Coloquei o console.log para ler o motivo da causa do não aparecimento do canvas, também apareceu o mesmo problema.
canvas.js:2 Uncaught TypeError: Cannot read property 'getContext' of null
at canvas.js:2Porque será?