Meu código onde eu desenho a bandeira da Irlanda, um país que gosto muito :D
<canvas width='600' height='400'></canvas>
<script>
//LÓGICA DE PROGRAMAÇÃO 2.0 - AULA 1 - DESENHANDO GRÁFICOS COM CANVAS
var canvas = document.querySelector('canvas'); //PUXA A TAG "CANVAS" E SEUS ATRIBUTOS PARA DENTRO DO MUNDO JS
var brush = canvas.getContext('2d'); // ARMAZENA NA VARIÁVEL "BRUSH" A FUNÇÃO GETCONTEXT, AVISANDO QUE ESTAMOS DESENHANDO EM UM AMBIENTE 2D.
//APÓS DETERMINAR E ARMAZENAR EM VARIÁVEIS O CANVAS (TELA) E O BRUSH (PINCEL), UTILIZA-SE COMANDOS PARA EFETUAR AÇÕES COM O PINCEL:
brush.fillStyle = 'green'; //"FILLSTYLE" DETERMINA A COR DO PINCEL. DEVE VIR ANTES DO FILLRECT, QUE DE FATO DESENHA O RETÂNGULO NA TELA.
brush.fillRect(0,0,200,400); //É O COMANDO QUE DE FATO DESENHA O RETÂNGULO. OS ATRIBUTOS CORRESPONDEM A COORDENADAS X E Y, E DIMENSÕES DO RETÂNGULO DESENHADO. X=0, Y=0, WIDTH = 200, HEIGHT = 400.
brush.fillStyle = 'white';
brush.fillRect(200,0,200,400);
brush.fillStyle = 'orange';
brush.fillRect(400,0,200,400);
//DESENHOU A BANDEIRA DA IRLANDA :)
</script>