Legal eu fiz dois, porem não usei códigos mas o nome das cores!!!
<meta charset="utf-8">
<canvas width= "600" height= "400"> </canvas>
<br><h1>Dois esquadros...<h1>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');//Para obter um objeto desta interface, chama-se getContext() em um elemento <canvas>, adicionando "2d" como argumento
// fillStyle define a cor de preenchimento do retângulo
// beginPath() Inicia um novo caminho (path), esvaziando a lista de sub-caminhos (sub-paths)
// fill() define a cor de preenchimento do retângulo.
// movTo() move o ponto inicial de um novo sub-caminho (sub-path) para as coordenadas.
// lineTo() conecta o último ponto do sub-caminho (sub-path) para as coordenadas x, y, através de uma linha (mas na realidade não a desenha).
pincel.fillStyle = 'black';
pincel.beginPath();
pincel.moveTo(100, 50);
pincel.lineTo(450, 50);
pincel.lineTo(450, 400);
pincel.fill();
pincel.fillStyle = 'white';
pincel.beginPath();
pincel.moveTo(225, 100);
pincel.lineTo(400, 100);
pincel.lineTo(400, 275);
pincel.fill();
pincel.fillStyle = 'green';
pincel.beginPath();
pincel.moveTo(50, 50);
pincel.lineTo(50, 400);
pincel.lineTo(400, 400);
pincel.fill();
pincel.fillStyle = 'blue';
pincel.beginPath();
pincel.moveTo(100, 175);
pincel.lineTo(100, 350);
pincel.lineTo(275, 350);
pincel.fill();
</script>
