Dibujar stick man o figura de palo Canvas HTML5

Una figura de palos o garabatos es un dibujo muy simple de una persona o animal, en este caso es una persona y usaremos Canvas HTML5.

💡 ¿Quieres aprender más? Este artículo es parte de nuestra Recopilación de Plugins JavaScript y jQuery → donde encontrarás más de 20 tutoriales gratuitos esperándote para llevar tus habilidades al siguiente nivel.

El dibujo de una persona que haremos consta de un circulo para la cabeza y lineas para brazos y piernas.

Codigo

Como siempre, primero les muestro el codigo que utilizo, todo el código va en el cuerpo o body del documento HTML.

Parte 1. Elemento canvas. Es un elemento canvas básico con un borde y medidas 960×540.

<canvas id="mycanvas" width="960" height="540" style="border: 1px black solid; "></canvas>

Parte 2. Script para crear el stick man. El código javascript para dibujar dentro de el elemento canvas, con algunos comentarios para facilitar la comprensión.

// 1. Configuración inicial
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');

ctx.lineWidth = 8;        // Grosor de la línea
ctx.strokeStyle = 'blue'; // Color de trazo (azul)

var startx = 480; // Punto de origen X
var starty = 200; // Punto de origen Y

// 2. Dibujar la Cabeza (Círculo)
ctx.beginPath();
// Parámetros: x, y, radio, ángulo inicial, ángulo final (2*PI es un círculo completo)
ctx.arc(startx, starty, 20, 0, 2 * Math.PI); 
ctx.stroke();

// 3. Dibujar el Cuerpo (Línea vertical)
ctx.beginPath();
ctx.moveTo(startx, starty + 20);   // Inicio desde la base de la cabeza
ctx.lineTo(startx, starty + 100);  // Extensión hacia abajo
ctx.stroke();

// 4. Dibujar los Brazos
ctx.beginPath(); 
ctx.moveTo(startx, starty + 25);   // Brazo izquierdo
ctx.lineTo(startx - 30, starty + 60);
ctx.stroke();

ctx.beginPath(); 
ctx.moveTo(startx, starty + 25);   // Brazo derecho
ctx.lineTo(startx + 30, starty + 60);
ctx.stroke();

// 5. Dibujar las Piernas
ctx.beginPath(); 
ctx.moveTo(startx, starty + 100);  // Pierna izquierda
ctx.lineTo(startx - 30, starty + 150);
ctx.stroke();

ctx.beginPath(); 
ctx.moveTo(startx, starty + 100);  // Pierna derecha
ctx.lineTo(startx + 30, starty + 150);
ctx.stroke();

Ahora ya esta terminado el código, ahora vamos a ver el resultado.

Resultado

El resultado es una figura de una persona hecha con palos o garabatos.

A ustedes que les parece este ejemplo, quieren mas ejemplos de dibijos en canvas ?

Conceptos clave explicados:

• beginPath(): Es fundamental usarlo antes de cada nueva forma o grupo de líneas para “limpiar” el pincel y que los estilos no se mezclen o se repinten trazos anteriores.
• moveTo(x, y): Mueve el “lápiz” a una coordenada específica sin dibujar nada. Es el punto de inicio.
• lineTo(x, y): Dibuja una línea desde la posición actual hasta las nuevas coordenadas.
• arc(): Se utiliza para crear arcos o círculos. Recuerda que los ángulos en Canvas se manejan en radianes; por eso usamos $2 \cdot \pi$ para un círculo completo.

¿Necesitas un software de ventas listo para producción?

Inventio Max es la solución profesional con soporte para múltiples almacenes, reportes avanzados y gestión de usuarios.

Ver Inventio Max – Sistema de Inventario y Ventas Profesional →