Deixar aqui para quem quiser dá uma olhada e deixar uma dica.
Espero ter ajudado. Sucesso na sua jornada!!
<canvas width="600" height="400"> </canvas>
<script>
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
function desenharRetangulo (xa, ya, xc, yc, cor) {
pincel.fillStyle = cor;
pincel.beginPath();
pincel.moveTo(xa, ya);
pincel.lineTo(xa, yc);
pincel.lineTo(xc, yc);
pincel.fill();
}
desenharRetangulo(50, 50, 250, 250, "black");
desenharRetangulo(70, 95, 200, 230, "white");
</script>
