Clase de lógica de programación 3

Escuadra

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

<script>

var pantalla = document.querySelector("canvas")
var pincel = pantalla.getContext("2d");

pincel.fillStyle = "black";
pincel.beginPath();
pincel.moveTo(50,50);
pincel.lineTo(50,400);
pincel.lineTo(400,400);
pincel.fill();

pincel.fillStyle = "white";
pincel.beginPath();
pincel.moveTo(100,175);
pincel.lineTo(100,350);
pincel.lineTo(275,350);
pincel.fill();

</script>

Rostro de Minecraft Creeper

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

<script>

var pantalla = document.querySelector("canvas")
var pincel = pantalla.getContext("2d");

pincel.fillStyle = "green";
pincel.fillRect(0,0,350,250)
pincel.fillStyle = "olive";
pincel.fillRect(0,0,50,50)
pincel.fillStyle = "olive";
pincel.fillRect(100,0,50,50)
pincel.fillStyle = "olive";
pincel.fillRect(200,0,50,50)
pincel.fillStyle = "olive";
pincel.fillRect(300,0,50,50)

pincel.fillStyle = "olive";
pincel.fillRect(0,100,50,50)
pincel.fillStyle = "olive";
pincel.fillRect(0,200,50,50)

pincel.fillStyle = "olive";
pincel.fillRect(100,100,50,50)
pincel.fillStyle = "olive";
pincel.fillRect(100,200,50,50)

pincel.fillStyle = "olive";
pincel.fillRect(200,100,50,50)
pincel.fillStyle = "olive";
pincel.fillRect(200,200,50,50)

pincel.fillStyle = "olive";
pincel.fillRect(300,100,50,50)
pincel.fillStyle = "olive";
pincel.fillRect(300,200,50,50)






pincel.fillStyle = "black";
pincel.fillRect(100,50,50,50);//ojo izquierdo
pincel.fillStyle = "black";
pincel.fillRect(200,50,50,50); //ojo derecho 

pincel.fillStyle = "black";
pincel.fillRect(150,100,50,80); //nariz

pincel.fillStyle = "black";
pincel.fillRect(120,140,30,70);//boca
pincel.fillStyle = "black";
pincel.fillRect(200,140,30,70);


</script>