Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Olá, o que estou fazendo de errado? Já tentei com aspas duplas também.
<canvas width="600" height="400"> </canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'lightgrey';
pincel.fillRect = (0, 0, 600, 400);
</script>
Fica em branco? Aperte F5 e me da um feedback para ver se funciona.
Sim Flávio, fica em branco. Já tentei F5, control + R, recriei o arquivo, usei aspas duplas, tentei no IE, Edge, e nada... alguma ideia?
Você escreveu errado a cor. O correto é lightgray. Por isso nada é exibido.
Agora é continuar com os estudos, Luiz!
Já tentei outras cores também...
<canvas width="600" height="400"> </canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'red';
pincel.fillRect = (0, 0, 600, 400);
</script>No console do seu Chrome, o que é exibido?
Você salvou o arquivo com a extensão correta? Se usou bloco de notas com certeza não esta.
Já tentei o console também, tudo em branco...
Estou usando o sublime, também já tentei excluir o arquivo e salva-lo novamente com o nome "canvas.html"...
Não funcionou porque você colou sem querer acento:
pincel.fillRect = (0, 0, 600, 400);O correto também é pincel.fillReact(0, 0, 600, 400);
Com um olhar de cangaceiro, reparei. Apague a linha e escreva novamente.
Sem querer, não faço ideia como , você colou um "i" que não é i.
Como disse, apaga e escreva fillRect novamente.
Aliás, para garantir, crie um arquivo novo e escreva tudo do zero. Para que o arquivo não tenha esse caractere inválido e você acabe cortando e colocando com problema.
Outro problema era que você usou fillRect como propriedade e não função.
Você fez assim:
pincel.fillRect = (0, 0, 600, 400);O correto é: pincel.fillRect(0, 0, 600, 400);
Na verdade, o caractere especial nem foi o vilão, foi mesmo a chamada da função.
Rescrevi tudo e continua tudo em branco...
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
pincel.fillStyle = "red";
pincel.fillRect = (0, 0, 600, 400);
</script>Agora consegui, era a questão da propriedade mesmo...