mientras menos lieas mejor
<!DOCTYPE html>
<html>
<body>
<canvas width="600" height="400"></canvas>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
// Configuración del estilo
var colores = ["Darkgreen", "Black", "Black", "Black", "Black"];
var rectangulos = [
{ x: 50, y: 50, width: 350, height: 300 }, // Cabeza
{ x: 100, y: 110, width: 90, height: 90 }, // Ojo izquierdo
{ x: 260, y: 110, width: 90, height: 90 }, // Ojo derecho
{ x: 190, y: 200, width: 70, height: 100 }, // Nariz
{ x: 150, y: 240, width: 40, height: 110 }, // Parte superior de la boca
{ x: 260, y: 240, width: 40, height: 110 } // Parte inferior de la boca
];
// Dibujar los rectángulos
for (var i = 0; i < rectangulos.length; i++) {
pincel.fillStyle = colores[i];
pincel.fillRect(rectangulos[i].x, rectangulos[i].y, rectangulos[i].width, rectangulos[i].height);
}
</script>
</body>
</html>
