Código do "programa.html" comentado para um melhor entendimento

O Código é relacionado do momento da criação do "canvas até o desenho do círculo".

<meta charset="UTF-8">

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

<script>

var tela = document.querySelector('canvas'); // captura a tag 'canvas' no html
var pincel = tela.getContext('2d'); // tipo de pincel que será usado na tela    

pincel.fillStyle = 'lightgrey'; // altera a cor do canvas
pincel.fillRect(0, 0, 600, 400); // preencher o retângulo
             //(x, y, larg, alt);
pincel.fillStyle = 'green';
pincel.fillRect(0, 0, 200, 400);
             //(x, y, larg, alt);
pincel.fillStyle = 'red';
pincel.fillRect(400, 0, 200, 400);
             //( x , y, larg, alt);
pincel.fillStyle = 'yellow'; // cor interna do triângulo
pincel.beginPath(); // inicia o caminho para o triângulo
pincel.moveTo(300, 200); // define o 1° ponto inicial sem linha
           //( x ,  y );
pincel.lineTo(200, 400); // define o 2° ponto iniciando do 1° ponto inicial e vai até o canto inferior direito da cor verde
           //( x ,  y );
pincel.lineTo(400, 400); // define o 3° ponto iniciando do 2° ponto e vai até o canto inferior esquerdo da cor vermelha
           //( x ,  y );
pincel.fill(); // preenche todo o espaço do triângulo na cor 'yellow' declarada no 'pincel.fillStyle' acima
pincel.fillStyle = 'blue'; // cor interna do círculo
pincel.beginPath(); // inicia um novo caminho para o círculo
pincel.arc(300, 200, 50, 0, 2 * 3.14); // desenha o círculo na tela
    //(x, y, raio, ângulo inicial, ângulo final radiano);
pincel.fill(); // preencher toda a área do círculo na cor 'blue' declarada no 'pincel.fillStyle' acima

</script>
<script>

//  Comentários para um melhor aprendizado relacionado ao código acima apenas

//    Traduções e significados

// querySelector => consultaSeletor
// getContext => obterContexto
// 2d => significa uma tela plana constituída apenas de frente e trás, sem laterais, formando assim a tela.
// fillRect => preencherRetângulo
// fillStyle => preencherEstilo
// beginPath => começarCaminho
// moveTo => moverPara
// lineTo => linhaPara
// fill => preencher
// arc => arco

//    Funções ou métodos do javascript

// .querySelector(); => captura tags no HTML
// .getContext(); => retorna um contexto de desenho no canvas
// .fillRect(); => desenha um retângulo "preenchido".
// .beginPath(); => inicia um caminho
// .moveTo(); =>  move o caminho para o ponto especificado na tela, sem criar uma linha.
// .lineTo(); => adiciona um novo ponto e cria uma linha à partir do último ponto especificado na tela (este método não desenha a linha).
// fill(); => O método preenche os elementos especificados. Você pode especificar a posição de onde iniciar e terminar o preenchimento.
// .arc(); => cria um arco/curva

</script>