Como dibujar a Messi en JavaScript con Canvas

No sé si será la fiebre del mundial, pero quiero mostrarles como dibujar (una caricatura de Messi en este caso) con el uso de Canvas, una etiqueta con mucho potencial en HTML5 administrada en JavaScript.

Es cierto que con canvas se puede importar una imagen y listo. Pero, ¿qué hay si quieres tener algun tipo de figura, forma o diseño en tu web sin cargar una imagen? Si se trata de algo sencillo el uso de canvas es una opción muy buena.

Si se trata de algo complejo es mucho más tedioso dibujarlo con canvas, el ejemplo de este artículo simplemente es para ver todas las ideas que se tratarán en este artículo combinadas conjuntamente y tambien para mostrar la fuerza de canvas.

Aqui puedes ver una imagen lograda con canvas, una de las ventajas que se aprecia en los diseños con canvas es que no se pixelan. Ahora verás como hacer estos diseños Y al final del artículo podrás ver en vídeo el proceso total de desarrollo acelerado.

Aquí tienes la caricatura original sobra la que se ha hecho el diseño. Sí, lo sé, no es exactamente igual en todos los detalles, pero no se trata de hacerlo perfecto, solo es una muestra de lo que se puede hacer en poco tiempo con canvas.

¿Cómo funciona canvas?

Podemos entender el funcionamiento de canvas de una forma sencilla si lo vemos como dibujar de formar vectorial.

• Primero se establece un punto incial desde el que comenzar el dibujo.
  
• Luego se indican los siguientes los siguientes puntos claves através de sus coordenadas: Es parecido a estos juegos de niños donde hay varios puntos numerados y el niño debe unirlos en orden hasta que los completa y termina viendo la figura que forman.
  
• Tipo de conexion entre puntos: Aquí esta toda la fuerza de canvas. En la indicación de cual es el siguiente punto de la figura se especifica que tipo de línea lo unira: una recta, una curva simple o una curva beizer.
  

Antes de ver cómo dibujar estos tipos de conexiones entre puntos veamos como crear el elemento canvas en el que dibujaremos los puntos que darán forma al dibujo

El elemento canvas HTML

En nuestro codigo .html simplemente tenemos que crear un elemento canvas con un id que usaremos despues en el código JavaScript e indicar el espacio que ocupará

Código :

<canvas id="pelo" width="785" height="1144"></canvas>

Despues con JavaScript establecemos el contexto de edición permitiendo la "edición gráfica" de este elemento.

Código :

var silueta_pelo = document.getElementById("pelo");
var dibujo = silueta_pelo.getContext("2d");

La variable "dibujo" es la que usaremos para añadirle puntos y rectas o curvas

Color y punto de partida

Primero de todo indicamos las coordenadas de las que partimos y tambien el color que tendrá el dibujo que estemos creando

Código :

dibujo.beginPath();
dibujo.fillStyle = "black";
dibujo.moveTo(20,20); //coordenadas del punto de partida

Recordemos que las coordenadas que indiquemos son dentro del espacio que espeficifamos en su declaracion html que ocuparia el elemento canvas. No hay que confundir esto con la ubicación dentro del sitio web que tome el elemento, algo que se indicará con el archivo .css

Código :

 <canvas id="pelo" width="1992" height="2028"></canvas>

Código :

canvas{
   position: absolute;
   top: 0px;
   left: 0px;
}

Cómo trazar rectas

Para trazar una recta pondremos la siguiente linea de codigo

Código :

//coordenadas hacia donde se trazará la recta
dibujo.lineTo(80,96); 

Tenemos que tener presente que cualquier trazo que hagamos, sea recta o curva tomará como punto de partida el último punto indicado en el dibujo.

Cómo trazar curvas simples

En este trazo tenemos que tener presente 2 puntos:

• El punto final
  
• El punto hacia donde tiende la curva: es el más importante y el que determina el aspecto, grado de curvatura, ángulo y profundidad que tomará el trazo.
  

El código para este trazo de curva simple es el siguiente

Código :

dibujo.quadraticCurveTo(PuntoFinal_X, PuntoFinal_Y, PuntodeCurva_X, PuntodeCurva_Y);

Cómo trazar curvas Beizer

Estas curvas son más complejas ya que no tienen solo un punto de curva, sino que podemos usar 2.
Esto nos permitirá trazar curvas más exactas y con más de una dirección



El código para este trazo de curva simple es el siguiente

Código :

dibujo.bezierCurveTo(PuntodeCurva1_X, PuntodeCurva1_Y, PuntodeCurva2_X, PuntodeCurva2_Y, PuntoFinal_X, PuntoFinal_Y) 

Cerramos la figura

Es necesario especificar el cierre y finalización de la figura para que la podamos visualizar.
Es tan simple como poner la siguiente línea

Código :

dibujo.fill();

En el vídeo tienes todo el proceso de creación acelerado.

El enlace a GitHub con todo el código esta aquí.

Resumen

Aprende a usar canvas en JavaScript para figuras simples (el ejemplo de la caritura no sería práctico en un proyecto real) y podrás dar toques estéticos a tus diseños.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.