Este es mi ejemplo del creeper
<!-- Crear una pantalla pra dibujar o graficar -->
<canvas width="600" height="400"> <!-- Ancho y alto --> </canvas>
<script>
//conectar html con el scrip
var pantalla = document.querySelector('canvas');
//crear pincel
var pincel = pantalla.getContext('2d');
//para definir el color de fondo de nuestra canva
pincel.fillStyle = 'lightgrey';
//funcion de llenar rectangulo
// X Y X Y Inicio - lo que abarcará
pincel.fillRect(0, 0, 600, 400); //pasar propiedad
//para definir el color del primer lienzo
pincel.fillStyle = '#005200';
//funcion de llenar rectangulo
pincel.fillRect(0, 0, 350, 300); //pasar propiedad
//ojo 1
pincel.fillStyle = 'black';
pincel.fillRect(50, 45, 90, 90); //pasar propiedad
//ojo 2
pincel.fillStyle = 'black';
pincel.fillRect(210, 45, 90, 90); //pasar propiedad
//nariz
pincel.fillStyle = 'black';
pincel.fillRect(140, 135, 70, 100); //pasar propiedad
//boca
pincel.fillStyle = 'black';
pincel.fillRect(100, 190, 40, 110); //pasar propiedad
//boca2
pincel.fillStyle = 'black';
pincel.fillRect(210, 190, 40, 110); //pasar propiedad
</script>