Canvas

Imagen correspondiente a la primera actividad relacionada a Canvas, The creeper
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>First Canvas</title>
</head>
<!--Using canvas for drawing-->
<canvas width="600" height="400"></canvas>
<body>

    <script>
        //Recuperar eventos de canvas mediante su referencia.
        var canvas = document.querySelector("canvas");//Variable con el nombre de canvas.
        //Recuperar el contenido de la pantalla.
        var pincel = canvas.getContext("2d");
        //(X for horizontal and Y for vertical)
        //We are going to draw the head of Creeper (Minecraft's character)

        //fillRect(x,y,width,height)
        //BACKGROUND
        pincel.fillStyle = "#3386FF";
        pincel.fillRect(0,0,600,400);//This its HEAD.
        //FIRST RECTANGLE.
        pincel.fillStyle = "darkgreen";
        pincel.fillRect(125,48,350,300);//This its HEAD.
        //FIRST TWO RECTANGLE.
        pincel.fillStyle = "darkgreen";
        pincel.fillRect(190,250,220,150);//This its BODY.
        //SECOND RECTANGLE.
        pincel.fillStyle = "black";
        pincel.fillRect(175,100,90,90);//This its LEFT EYE.
        //THIRD RECTANGLE.
        pincel.fillStyle = "black";
        pincel.fillRect(335,100,90,90);//This its RIGHT EYE.
        //FOURTH RECTANGLE.
        pincel.fillStyle = "black";
        pincel.fillRect(265,190,70,100);//This its NOSE.
        //FIFTH RECTANGLE.
        pincel.fillStyle = "black";
        pincel.fillRect(225,238,40,110);//This its RIGHT MOUTH.
        //SIXTH RECTANGLE.
        pincel.fillStyle = "black";
        pincel.fillRect(335,238,40,110);//This its LEFT MOUTH.

        //Draw a text, first part.
        pincel.font = "30px Comic Sans MS";
        pincel.fillStyle = "silver";
        //pincel.textAlign = "center";
        pincel.fillText("Hello there!",canvas.width/25, canvas.height/11);

        //Draw a text, second part.
        pincel.font = "30px Comic Sans MS";
        pincel.fillStyle = "silver";
        //pincel.textAlign = "center";
        pincel.fillText("I'am The Creeper",310,35);

    </script>

</body>
</html>