Desenhando_Graficos_Com_Canvas_Duas_Bandeiras.html

<canvas id="tela" width="600" height="400" style="border:1px solid #ccc;"></canvas><br/><br/><br/><br/><br/>

<canvas id="tela2" width="600" height="400" style="border:1px solid #ccc;"></canvas>

<script type="text/javascript">
    var tela = document.getElementById("tela");
    var c = tela.getContext("2d");

    c.fillStyle = "yellow";
    c.fillRect(0,0,600,200);

    c.fillStyle = "blue";
    c.fillRect(0,200,600,100);

    c.fillStyle = "red";
    c.fillRect(0,300,600,100);

    var tela2 = document.getElementById("tela2");
    var c2 = tela2.getContext("2d");

    // c2.fillStyle = "white";
    // c2.fillRect(0,0,200,400);

    c2.fillStyle = "red";
    c2.fillRect(200,0,400,200);

    c2.fillStyle = "green";
    c2.fillRect(200,200,400,200);

</script>


<h3>Colômbia</h3>
<canvas id="colombia" width="300" height="200"></canvas>

<script type="text/javascript">
    var escala = 1.2;
    var bandeira = document.getElementById("colombia");
    bandeira.width *= escala;
    bandeira.height *= escala;
    var largura = bandeira.width;
    var altura = bandeira.height;
    var pincel = bandeira.getContext("2d");

    pincel.fillStyle = "#FCD116";
    pincel.fillRect(0, 0, largura, altura/2);

    pincel.fillStyle = "#003893";
    pincel.fillRect(0, altura/2, largura, altura/4);

    pincel.fillStyle = "#CE1126";
    pincel.fillRect(0, altura*3/4, largura, altura*3/4);
</script>


<h3>Madagascar</h3>
<canvas id="madagascar" width="300" height="200"></canvas>

<script type="text/javascript">
    var escala = 1.2;
    var bandeira = document.getElementById("madagascar");
    bandeira.width *= escala;
    bandeira.height *= escala;
    var largura = bandeira.width;
    var altura = bandeira.height;
    var pincel = bandeira.getContext("2d");

    pincel.fillStyle = "#FFFFFF";
    pincel.fillRect(0, 0, largura/3, altura);

    pincel.fillStyle = "#fc3d32";
    pincel.fillRect(largura/3, 0, largura*2/3, altura/2);

    pincel.fillStyle = "#007e3a";
    pincel.fillRect(largura/3, altura/2, largura*2/3, altura/2);
</script>