Erro get.Context

Boa noite, Mateus! Como vai?

Vc poderia colar o código completo aqui para eu dar uma olhada e tentar te ajudar?

Grande abraço e bons estudos, meu aluno!

<canvas id="canvas" width="300" height="300"></canvas>

<script>

    var canvas = document.querySelector("canvas");
    var pincel = canvas.getContext("2d");
    console.log(ctx);

    pincel.fillStyle = "green";                //1
    pincel.fillRect (0,0,350,300);

    pincel.fillStyle = "black";                //2
    pincel.fillRect (50,50,140,140);

    pincel.fillStyle = "black";                //3
    pincel.fillRect (210,50,300,140);

    pincel.fillStyle = "black";                //4
    pincel.fillRect (140,140,210,240);

    pincel.fillStyle = "black";                //5
    pincel.fillRect (100,290,140,400);

    pincel.fillStyle = "black";                //6
    pincel.fillRect (210,290,250,400);



</script>

Opa, Mateus! Se vc executar esse código num navegador (como o Google Chrome, por exemplo), vc verá que no console do desenvolvedor irá aparecer uma mensagem parecida com essa:

Uncaught ReferenceError: ctx is not defined at index.html:7

O que indica que vc está utilizando alguém chamado ctx mas que em momento nenhum foi definido no seu código! E a mensagem de erro ainda diz que isso está acontecendo na linha 7 do arquivo index.html!

E a linha 7 é justamente onde vc faz console.log(ctx), tentando imprimir um tal de ctx que nunca foi criado no seu código! Basta remover essa linha e tudo vai funcionar!

Aprendizado para a vida: o console do desenvolvedor dos navegadores é uma excelente ferramente! Sempre que um código JavaScript não funcionar como vc esperava, dê uma olhada lá!

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Você está completo de razão Gabriel sobre esse código. Eu acabei copiando o errado. Esse eu estava tentando fazer depois de pesquisar na internet depois que estava aparecendo pra mim esse primeiro erro que relatei na abertura do fórum. O código que me referi foi esse aqui embaixo, da uma olhada..

<canvas id="canvas" width="300" height="300"></canvas>

<script>

    var canvas = document.querySelector('canvas');
    var pincel = canvas.getContext('2d');


    pincel.fillStyle = "green";                //1
    pincel.fillRect (0,0,350,300);

    pincel.fillStyle = "black";                //2
    pincel.fillRect (50,50,140,140);

    pincel.fillStyle = "black";                //3
    pincel.fillRect (210,50,300,140);

    pincel.fillStyle = "black";                //4
    pincel.fillRect (140,140,210,240);

    pincel.fillStyle = "black";                //5
    pincel.fillRect (100,290,140,400);

    pincel.fillStyle = "black";                //6
    pincel.fillRect (210,290,250,400);



</script>

Gabriel, consegui encontrar meu erro. Era o Código de comentário para o mundo HTML <!-- que eu uso quando tenho mais de um programa em um mesmo arquivo. =D Obrigado ai pela ajuda.

Mas agora surgiu outro problema: minhas coordenadas não deram o resultado esperado. E eu não concordo de o resultado ter dado errado. hehheehheheehhee

Eu desenhei no papel e os pontos estão certo, ao meu ver até agora neh.

Vê se consegue me explicar meu erro..

Opa, Mateus! Vamos lá juntos tentar chegar na luz do conhecimento!

O código que está gerando o resultado que vc não esperava é esse mesmo do seu último comentário? Caso não seja, cole aqui, por favor, o código ao qual vc se refere!

Outra coisa, qual é o resultado que vc estava esperando?

Com a resposta dessas perguntas eu poderei tentar te ajudar!

O código correto é esse último que postei. E eu esperava que saísse corretamente a cabeça daquele monstrinho do minecraft.. hehehehee

Mateus,

Teu desenho no papel, passou do tamanho do papel ?

Teu canvas está configurado assim:

<canvas id="canvas" width="300" height="300"></canvas>

Logo, não poderíamos ultrapassar a medida de x e de y dos valores 300 indicado na tag canvas.

Existem 3 valores acima de 300 nos teus 'fillRect' .

Faça o desenho de novo no papel, e reveja as 'medidas', ou melhor, faça-o no paint, e veja os valores de 'x,y' na barra inferior do paint, passando o mouse pelos pontos extremos de cada retângulo.

Abraços e bons estudos !

Opa, Mateus! Eu não sei que monstrinho do minecraft vc está se referindo! Não tô ligado nessas paradas não! hahahaha

Mas se vc mandar um print ou uma imagem do desenho que vc esperava ver desenhado no canvas eu posso tentar te ajudar!

De qualquer forma, a dica dada pelo Marcus é uma boa! Veja se com o que ele te falou vc consegue resolver o problema!

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Fala Marcus. Cara obrigado ai pela percepção dos valores do canvas, não tinha reparado. Me ajudou muito.

E Gabriel esse monstrinho que me referi eu tbm não conhecia.. ehuaheua fui conhecer no exercício do professor.

Mas eu consegui achar meu problema, um amigo me ajudou. Eu estava errando no conceito do código fillRect (), os dois últimos dados inseridos eu estava colocando como sendo a posição final do meu retângulo e não o tamanho das coordenadas. Esclareceu tudo.

Vlw pessoal pela ajuda.

Por nada, Mateus! Sempre que tiver qualquer dúvida ou precisar de alguma ajuda é só mandar aqui no fórum!

Grande abraço e bons estudos, meu aluno!