Vamos a ver como crear un gráfico por ejemplo un cuadrado con la etiqueta <canvas> que nos trae HTML5, combinando con la tecnología JavaScript veremos lo fácil que es.

Recordar que el punto de origen en un canvas empieza desde la esquina superior izquierda que es el eje X, Y.

nota

Propiedades y Métodos para Canvas

  • strokeStyle : propiedad que indica el color del trazo.
  • lineWidth : propiedad que indica el gruesor del trazado
  • fillStyle : propiedad que indica el color del relleno de dibujo del canvas.
  • getContext(“2d”) : obtenemos el contexto de la referencia de la etiqueta canvas.
  • beginPath() : indica la nueva ruta del trazo a empezar
  • fillRect(x1, x2, y1, y2) : método que para dibujar el rectángulo en un canvas.
  • moveTo() : método que indica el punto de origen del trazo
  • lineTo(x, y) : método que indica el punto donde llegar el trazo, en eje X e Y
  • stroke() : método que dibujar los trazos en el canvas

Veamos un ejemplo, dibujar un rectángulo y rellenarlo.

Veamos el código del ejemplo. 

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Mi Titulo</title>
    <meta charset="UTF-8">
    <script type="text/javascript">
        // obtengo referencia del canvas por su ID
        var canvas = document.getElementById('miCanvas');
        // creo un contexto a travez de la referencia del canvas con un metodo
        var ctx = canvas.getContext("2d");

        // propiedad para rellenar el color un gráfico creado
        ctx.fillStyle = 'blue';
        // metodo para crear un rectangulo con el eje x1,y1,x2,y2
        ctx.fillRect(0, 0, 300, 200);
        // metodo para el comienzo de nuevo trazo
        ctx.beginPath();
        // propiedad para asignar el gruesor de los trazos
        ctx.lineWidth = "2";
        // metodo para el punto de origen del trazo
        ctx.moveTo(20, 20);
        // metodo para definir el color del trazo
        ctx.strokeStyle = 'green';
        // metodo para el punto donde seguira el trazo
        ctx.lineTo(20, 70);
        ctx.lineTo(70, 70);
        ctx.lineTo(70, 20);
        ctx.lineTo(20, 20);
        ctx.stroke();
    </script>
</head>

<body>
    <canvas id="miCanvas" width="300" height="200" style="border: 1px solid blue">
    </canvas>

</body>

</html>