Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Meu canvas tá saindo do tamanho errado aparentemente

Fiz do zero pra fixar o exercício, mas não rodou. Pra verificar qual seria o erro fui colocando os trechos em forma de comentário e cheguei à função desenhaRetângulo. Mas aí vi que era questão da coordenada que eu passava ao chamar a função, x=200 e y=200, tudo ok, mas x=300 e y=300, não funciona. Então fui verificar se era o tamanho do canvas, e bingo, ao invés de 600x400, está 400x600, o que não faz sentindo. Alguém pode dar um help?

<canvas whidth="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 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(texto, x, y);
    }*/

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

    desenhaRetangulo(300, 300, 50, 50, "green");

    /*function desenhaBarras(x, y, serie, cores, texto) {

        desenhaTexto(x, y - 10, texto);

        //Variável para definir y do próximo retângulo (que é a soma de y mais as alturas dos retângulos anteriores):
        var somaYAltura = O; 

        for(i = 0; i < serie.length; i++) {

            var altura = serie[i];
            desenhaRetangulo(x, y + somaYAltura, 50, altura, cores[i]);
            somaYAltura = somaYAltura + altura;
        }

    }

    desenhaBarras(50, 50, serie2015, cores, "2015");
    desenhaBarras(150, 50, serie2016, cores, "2016");*/
1 resposta
solução!

Já achei! Era só a escrita de "width" :P E outro erro: ao declarar a variável "somaYAltura" atribuí a letra O, ao invés de 0.