Entrar Ainda não tem acesso?
Solucionado (ver solução)

Importante

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
(ver solução)
2
respostas

Não consigo fazer a função desenhaTexto(); funcionar

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Extraindo funções e atividade Frações

por Maria Eugênia Ferreira
| 76k xp | 86 posts

O código parece estar correto, não há erros quando abro no console do navegador. Mas não consigo fazer a função desenhaTexto(); funcionar, ou seja, exibir o texto. Segue o código:

<canvas width = '600' height = '400'></canvas>



<script>


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

    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400,);



     function desenhaTexto(texto, x , y) {

        pincel.font='20px Georgia';
        pincel.fillStyle='black';
        pincel.fillText(texto, x, y);    
    }


    desenhaTexto("Qual é a fração?", 50, 30);



    function desenhaQuadrado(x, y, tamanho, cor ){

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, tamanho, tamanho,);
        pincel.fillStroke = 'black';
        pincel.strokeRect (x, y, tamanho, tamanho)
    }


    for (var x = 0; x < 150; x = x + 50){

        desenhaQuadrado(x, 0, 50, 'green');
        desenhaQuadrado(x, 0, 50, 'green');
        desenhaQuadrado(x, 0, 50, 'green');

}

        desenhaQuadrado(x, 0, 50, 'white');






</script>
2 respostas
solução!
por Cássio Murilo
| 1301.2k xp | 2204 posts
Instrutor

Olá, Maria Eugênia! Tudo bem? Espero que sim!!!

Podemos fazer algumas alterações nesse código. Vamos lá!!!

Primeiro, no início, vamos colocar uma tag meta só para não termos erro de acentuação, caso queira escrever outros textos dentro do código:

<meta charset="UTF-8">

A variável tela e a variável pincel devemos colocá-la dentro da função desenhaTexto:

function desenhaTexto(texto, x, y) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');
        pincel.font = '20px Georgia';
        pincel.fillStyle = 'black';
        pincel.fillText(texto, x, y);
    }

o for, no final do código, não precisa ser chamado. Podemos retirar os desenhaQuadrado e chamá-los fora da função logo abaixo da funao desenhaTexto, passando somente o valor da variável y:

var y = 50;
    desenhaQuadrado(50, y, 100, 'green');
    desenhaQuadrado(150, y, 100, 'green');
    desenhaQuadrado(250, y, 100, 'green');

E por último, vamos colocar dentro da função desenhaQuadrado a variável tela e a variável pincel:

function desenhaQuadrado(x, y, tamanho, cor) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');
        pincel.fillStyle = cor;
        pincel.fillRect(x, y, tamanho, tamanho);
        pincel.fillStroke = 'black';
        pincel.strokeRect(x, y, tamanho, tamanho)
    }

Segue o código completo:

<meta charset="UTF-8">
<canvas width='600' height='400'></canvas>

<script>

    function desenhaTexto(texto, x, y) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');
        pincel.font = '20px Georgia';
        pincel.fillStyle = 'black';
        pincel.fillText(texto, x, y);
    }

    desenhaTexto("Qual é a fração?", 50, 30);

    var y = 50;
    desenhaQuadrado(50, y, 100, 'green');
    desenhaQuadrado(150, y, 100, 'green');
    desenhaQuadrado(250, y, 100, 'green');

    function desenhaQuadrado(x, y, tamanho, cor) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');
        pincel.fillStyle = cor;
        pincel.fillRect(x, y, tamanho, tamanho);
        pincel.fillStroke = 'black';
        pincel.strokeRect(x, y, tamanho, tamanho)
    }

</script>

Espero ter ajudado, Maria Eugênia!!!

Bons estudos e vamos em frente!!! ;-)

por Maria Eugênia Ferreira
| 76k xp | 86 posts

Obrigada, Cássio! Me ajudou bastante, o for eu tinha colocado mais para eu praticar, pois tenho dificuldade com a lógica por trás dele às vezes. Mas no final nem acabou ajudando.

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA