Crear una app de dibujo simple utilizando HTML 5 Canvas

En este tutorial te vamos a explicar los pasos simples para construir una app de dibujo utilizando puro JavaScript y HTML5 Canvas. También es útil para todos los que quieran aprender a crear una aplicación de dibujo basada en JavaScript.

HTML5 Canvas

El elemento canvas de HTML5 se utiliza para dibujar gráficos a través de secuencias de comandos (normalmente JavaScript). El elemento canvas es solamente un contenedor para los gráficos. Debe utilizar un script para dibujar los gráficos y mostrarlos.

Canvas cuenta con varios métodos para dibujar paths, cajas, círculos, textos y agregar imágenes. Así que, en este tutorial, he utilizado FabricJS como librería externa de canvas y he escrito algunas funciones JS para manejar diferentes características.

Crea tu app de dibujo

Vamos a apuntar a las características con las que va a contar tu aplicación de dibujo:

Dibujar un rectángulo
Dibujar un círculo
Dibujar de una imagen
Activar y desactivar el dibujo
Acercar zoom
Disminuir zoom
Restablecer zoom

Y necesitas las siguientes herramientas:

Un archivo HTML
Un archivo JavaScript
Una librería para canvas - Fabric.js

PASO 1

Crea los archivos siguientes en el directorio de aplicación:

index.html
main.js [o cualquier otro nombre]

PASO 2

Importa la librería FabricJS

PASO 3

Importa una imagen

La estructura de la aplicación debe ser similar a lo que ves a continuación:

App de dibujo

index.html
main.js
miimagen.jpg
fabric.js

Canvas y FabricJS

Consulta los enlaces de más abajo para saber más acerca de HTML 5 Canvas y la librería FabricJS:

El código

PASO 1

Carga la imagen en el canvas:

var src = 'rutaimagen';
 var canvas = new fabric.Canvas('canvas', {
                isDrawingMode: false
              });
              
fabric.Image.fromURL(src, function (oImg) {
                canvas.add(oImg);
            });

PASO 2

Añade las funciones necesarias para dibujar objetos:

Dibujar un círculo

var onSolidCircle = function () {
            canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 150, left: 150 }));
        }

Dibujar un rectángulo

var rect = new fabric.Rect({
               top: 100,
               left: 100,
               width: 60,
               height: 70,
               fill: '',
               selection: false,
               fill: '#f55'
           });

           canvas.add(rect);

PASO 3

Empezar y terminar de dibujar.

Necesitamos dos funciones que nos permitan indicarle al canvas cuándo comenzar a dibujar y cuándo dejar de dibujar.

var onStartDrawing = function () {
           canvas.isDrawingMode = true;
       }

var onStopDrawing = function () {
           canvas.isDrawingMode = false;
      }

PASO 4

Añadir funciones Zoom in y Zoom out.

El Zoom in y zoom out son hoy en día una característica muy básica en cualquier herramienta de dibujo de cualquier plataforma. Canvas necesita dos variables para controlar el zoom:

var canvasScale = 1;
var SCALE_FACTOR = 1.2;

Zoom in

var onZoomIn = function () {

            canvasScale = canvasScale * SCALE_FACTOR;

            canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
            canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);

            var objects = canvas.getObjects();
            for (var i in objects) {
                var scaleX = objects[i].scaleX;
                var scaleY = objects[i].scaleY;
                var left = objects[i].left;
                var top = objects[i].top;

                var tempScaleX = scaleX * SCALE_FACTOR;
                var tempScaleY = scaleY * SCALE_FACTOR;
                var tempLeft = left * SCALE_FACTOR;
                var tempTop = top * SCALE_FACTOR;

                objects[i].scaleX = tempScaleX;
                objects[i].scaleY = tempScaleY;
                objects[i].left = tempLeft;
                objects[i].top = tempTop;

                objects[i].setCoords();
            }

            canvas.renderAll();
        }

Zoom out

var onZoomOut = function () {
           canvasScale = canvasScale / SCALE_FACTOR;

           canvas.setHeight(canvas.getHeight() * (1 / SCALE_FACTOR));
           canvas.setWidth(canvas.getWidth() * (1 / SCALE_FACTOR));

           var objects = canvas.getObjects();
           for (var i in objects) {
               var scaleX = objects[i].scaleX;
               var scaleY = objects[i].scaleY;
               var left = objects[i].left;
               var top = objects[i].top;

               var tempScaleX = scaleX * (1 / SCALE_FACTOR);
               var tempScaleY = scaleY * (1 / SCALE_FACTOR);
               var tempLeft = left * (1 / SCALE_FACTOR);
               var tempTop = top * (1 / SCALE_FACTOR);

               objects[i].scaleX = tempScaleX;
               objects[i].scaleY = tempScaleY;
               objects[i].left = tempLeft;
               objects[i].top = tempTop;

               objects[i].setCoords();
           }

           canvas.renderAll();
       }

Resetear Zoom

var onResetZoom = function () {

           canvas.setHeight(canvas.getHeight() * (1 / canvasScale));
           canvas.setWidth(canvas.getWidth() * (1 / canvasScale));

           var objects = canvas.getObjects();
           for (var i in objects) {
               var scaleX = objects[i].scaleX;
               var scaleY = objects[i].scaleY;
               var left = objects[i].left;
               var top = objects[i].top;

               var tempScaleX = scaleX * (1 / canvasScale);
               var tempScaleY = scaleY * (1 / canvasScale);
               var tempLeft = left * (1 / canvasScale);
               var tempTop = top * (1 / canvasScale);

               objects[i].scaleX = tempScaleX;
               objects[i].scaleY = tempScaleY;
               objects[i].left = tempLeft;
               objects[i].top = tempTop;

               objects[i].setCoords();
           }

           canvas.renderAll();

           canvasScale = 1;
       }