2
respostas

[Projeto] Queria verificar se meu código ficou bom

Tive como preferência por as instruções em inglês até mesmo para me acostumar com idiomas para DEVS. Espero que gostem do modo que fiz o código. Boa prática!

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

<script>

    function drawRectangle(x, y, width, height, color) {
        var canvas = document.querySelector("canvas");
        var ctx = canvas.getContext('2d');

        ctx.fillStyle = color;
        ctx.fillRect(x, y, width, height);

        ctx.strokeStyle = 'black';
        ctx.strokeRect(x, y, width, height);
    }
    function drawText(text, x, y) {
        var canvas = document.querySelector("canvas");
        var ctx = canvas.getContext('2d');

        ctx.fillStyle = 'black';
        ctx.font = '20px Georgia'; 
        ctx.fillText(text, x, y);
    }
    function drawBar(x, y, serie, colors, text) { 
        drawText(text, x, y - 10);

        var addUp = 0;

            for (var i = 0; i < serie.length; i++) { 
                var height = serie[i];
                drawRectangle(x, y + addUp, 50, height, colors[i]);
                addUp += height;
        }
    }

var colors = ['blue', 'green', 'yellow', 'red'];
var serie2015 = [50, 25, 20, 5];
var serie2016 = [65, 20, 13, 2];
drawBar(50, 50, serie2015, colors, '2015');
drawBar(150, 50, serie2016, colors, '2016');

</script>
2 respostas

Top!!! Só faltou um espaço entre as funções no mais tá ok!!! Parabéns

Muito obrigado pelo feedback Rodrigo!