inspirado nos posts dos colegas, criei minhas próprias versões de bandeiras.. bandeira do brasil:

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

<script>

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

    pincel.fillStyle = 'darkgreen';
    pincel.fillRect(0, 0, 600, 400);

    pincel.fillStyle = 'yellow';
    pincel.beginPath();
    pincel.moveTo(0, 200);
    pincel.lineTo(300, 0);
    pincel.lineTo(600, 200);
    pincel.lineTo(300, 400);
    pincel.fill();

    pincel.fillStyle = 'darkblue';
    pincel.beginPath();
    pincel.arc(300, 200, 125, 0, 2*3.14);
    pincel.fill();

    pincel.fillStyle = 'white';
    pincel.beginPath();
    pincel.moveTo(180, 160);
    pincel.lineTo(427, 200);
    pincel.lineTo(420, 240);
    pincel.lineTo(172, 200);
    pincel.fill();


</script>

e também a do Orgulho Trans:

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

<script>

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

    pincel.fillStyle = 'lightblue';
    pincel.fillRect(0, 0, 600, 400);
    pincel.fillStyle = 'lightpink';
    pincel.fillRect(0, 80, 600, 240);
    pincel.fillStyle = 'white';
    pincel.fillRect(0, 160, 600, 80);

</script>

modéstia a parte, ficaram muito lindas :3 EEEEE fazendo a segunda, me toquei de uma coisa, por favor me confirmem.. quando eu uso o pincel.fillRect() devo inserir como parâmetro 4 coordenadas (x0, y0, x1, y1), certo?

porém, x1 e y1 não correspondem à posição final em que quero o pincel, mas sim na distância que ele vai percorrer a partir de x0 e y0, certo?

porque a princípio fiz a bandeira do Orgulho Trans assim:

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

<script>

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

    pincel.fillStyle = 'lightblue';
    pincel.fillRect(0, 0, 600, 400);
    pincel.fillStyle = 'lightpink';
    pincel.fillRect(0, 80, 600, 360);
    pincel.fillStyle = 'white';
    pincel.fillRect(0, 160, 600, 240);

</script>

e o resultado é totalmente bugado, assim percebi que os segundos valores (x1 e y1) são, na verdade, o deslocamento, o tamanho do desenho formado pelo retângulo, não sua posição final.. :O