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

fillText

Por que texto dentro do fillText não está aparecendo em cima dos dois gráficos? ps: já tentei sem as aspas tb.

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

<script>

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

        var canvas = document.querySelector('canvas');
        var pincel = canvas.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 canvas = document.querySelector('canvas');
        var pincel = canvas.getContext('2d');

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

    }

    desenhaBarra(0,30,50,50,'blue');
    desenhaBarra(0,80,50,25,'darkgreen');
    desenhaBarra(0,103.4,50,20,'yellow');
    desenhaBarra(0,122,50,5,'red');

    desenhaTexto("2015", 0,0);



    desenhaBarra(250,30,50,65,'blue');
    desenhaBarra(250,95,50,20,'darkgreen');
    desenhaBarra(250,114.4,50,13,'yellow');
    desenhaBarra(250,128,50,2,'red');

    desenhaTexto("2015", 250,0);






    </script>
6 respostas
solução!

Beleza Clara?

Tente trocar a linha 42 por

    desenhaTexto(250,10, '2015');

Onde inverto a ordem dos parâmetros e dou 10px para o texto (senao ele renderiza e tu só vê uma beradinha)

Oi Clara.

Na declaração da função

function desenhaTexto(x,y,texto);

Os dois primeiros parâmetros são as coordenadas e o ultimo é o texto. Mas quando você tenta usar, está invertendo a ordem. Veja

desenhaTexto("2015", 0,0);

Tente inverter e usar assim

desenhaTexto( 0 , 0 , "2015" );

Marquei como solucionada sem querer!

Testei do jeito que vocês indicaram e mesmo assim não deu certo! :/

Com esse código, só coloca o título na segunda barra. Tens que colocar na primeira também.

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

<script>

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

        var canvas = document.querySelector('canvas');
        var pincel = canvas.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 canvas = document.querySelector('canvas');
        var pincel = canvas.getContext('2d');

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

    }

    desenhaBarra(0,30,50,50,'blue');
    desenhaBarra(0,80,50,25,'darkgreen');
    desenhaBarra(0,103.4,50,20,'yellow');
    desenhaBarra(0,122,50,5,'red');

    desenhaTexto("2015", 0,0);



    desenhaBarra(250,30,50,65,'blue');
    desenhaBarra(250,95,50,20,'darkgreen');
    desenhaBarra(250,114.4,50,13,'yellow');
    desenhaBarra(250,128,50,2,'red');

    desenhaTexto(250,10,'2015');


    </script>

Ou seja...

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

<script>

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

        var canvas = document.querySelector('canvas');
        var pincel = canvas.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 canvas = document.querySelector('canvas');
        var pincel = canvas.getContext('2d');

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

    }

    desenhaBarra(0,30,50,50,'blue');
    desenhaBarra(0,80,50,25,'darkgreen');
    desenhaBarra(0,103.4,50,20,'yellow');
    desenhaBarra(0,122,50,5,'red');

    desenhaBarra(250,30,50,65,'blue');
    desenhaBarra(250,95,50,20,'darkgreen');
    desenhaBarra(250,114.4,50,13,'yellow');
    desenhaBarra(250,128,50,2,'red');

    desenhaTexto(0,10,'2015');
    desenhaTexto(250,10,'2016');


    </script>

Muito obrigada!!!!