Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Ajuda para identificar o erro

Oi gente! O meu texto não entra e não achei o erro.

<meta charset="UTF-8">

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

<script>


        function desenhaRetangulo(x, y, largura, altura, cor) {

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

            pincel.fillStyle = cor;
            pincel.fillRect(x, y, largura, altura);
            pincel.strokeStyle = "black";
            pincel.strokeRect(x, y, largura, altura);


        }

        function desenhaTexto (x, y, texto) {

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

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


        function desenhaBarra(x, y, serie, cores, texto) {

            desenhaTexto(x, y -10 , texto); // o menos 10 é a posição acima da barra

            var somaAltura = 0; // tem que ser zero porque vai ir somando com a altura para as barras entrarem no lugar certo. // soma as alturas da série 50, depois + 25, depois + 20

//o length para termos sempre o array atual no for(): São 4.

// abaixo é a base para o código selecionar as séries e as cores
            for (var i = 0; i < serie.length; i++) {
                var altura = serie[i]; 

                desenhaRetangulo(x, y + somaAltura, 50, altura, cores[i]);
                somaAltura = somaAltura + altura;

// o i é usado para as séries e cores poderem seguir o cálculo.
            }
        }


    var cores = ['blue','green','yellow', 'red'];
    var serie2015 = [50,25,20,5];
    var serie2016 = [65,20,13,2];

    desenhaBarra(50, 50, serie2015, cores, '2015');
    desenhaBarra(150, 50, serie2016, cores, '2016');

</script>

Obrigada.

2 respostas
solução!

Olá, Lia! Tudo bem contigo?

O problema está aqui

pincel.fillText(x, y, texto);

Se inverter para

pincel.fillText(texto, x, y);

o texto aparecerá como esperado.

Este trecho do código ficará desta forma

    function desenhaTexto(x, y, texto) {

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

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

Espero ter ajudado, Lia!

Um abraço e bons estudos

Ajudou sim Cássio. Obrigada!