Paleta de dibujo tipo paint, con canvas

Con motivo de un posible proyecto me puse a investigar sobre como hacer una especie de «paint» en web. Conocía la existencia de canvas pero no tenía muy claro hasta donde podía llegar y los problemas de compatibilidad de navegadores que podía tener.

Al final me lié y me lié y terminé desarrollando un plugin de jQuery así que nada, aquí lo dejo para el que le pueda servir. Y aquí una DEMO.

Instrucciones de uso:

  1. Agregar jQuery a nuestra página web
  2. Agregar una referencia al plugin canvasPaint.js
  3. Añadir este trozo de código aplicándolo a una capa:
    var canvasManager;
    $(window).load(function () {
         canvasManager = $(".canvas").canvasPaint();
    });

El plugin por si solo funciona en navegadores modernos, pero no en IE7 o IE8. Si queremos que funcione en estos necesitamos apoyarnos en la versión PRO de otro plugin, FlashCanvas. Y es por esto por lo que el plugin se inicializa en el «oload» de la ventana y no en el «onready» como suele ser común. Necesitamos que el plugin FlahCanvas se ejecute antes y así nos aseguramos. Con este plugin nos funcionará todo correctamente en IE7 y IE8, eso si, más lento.

<!--[if lt IE 9]>
<script src="FlashCanvasPro/flashcanvas.js" type="text/javascript"></script>
<![endif]-->

Una vez inicializado el plugin y gracias a la variable referencia que obtenemos «canvasManager» podemos llamar a todos sus métodos que son:

Método Parámetros Descripción
activateCircle  – Selecciona la herramienta de dibujar círculos rellenos
activateEmptyCircle  – Selecciona la herramienta de dibujar círculos
activateEmptyRectangle  – Selecciona la herramienta de dibujar rectángulos
activateEraser  – Selecciona la herramienta de borrar
activateLine  – Selecciona la herramienta de dibujar líneas
activatePen  – Selecciona la herramienta lápiz
activateRectangle  – Selecciona la herramienta de dibujar rectángulos rellenos
activateSpray  – Selecciona la herramienta spray
changeFillColor Color Cambia el color de relleno
changeOpacity 0-100% Cambia la opacidad
changeSprayDensity 0-100% Cambia la densidad de la herramienta spray
changeStrokeColor Color Cambia el color de línea
changeStrokeSize pixeles Cambia el grosor de la línea
clearAll  – Limpia todo el lienzo
loadBackgroundImage URL Carga una imágen en el fondo
redo  – Rehace la última operación
undo  – Deshace la última operación

21 comentarios en “Paleta de dibujo tipo paint, con canvas

  1. Muy bueno, yo tengo pensado hacer algo parecido pero no tengo idea de como lograr las animaciones para cuando arrastro por ejemplo la linea que siga el cursor del mouse y cuando la suelte se quede dibujada. agradecería si pudieras ayudarme en el tema. gracias de antemano.

    • Bueno, puedes mirar el codigo que esta resuelto ese problema. Uso dos capas, la de lo que esta pintado y la de lo que estoy pintando en este momento. El truco es en borrar y volver a pintar esta segunda capa cada vez que se mueve el mouse.

  2. Muy bueno Oscar… pero tambien tengo la misma consulta que Orelvis solo quiero obtener la idea de la creacion de la linea que sigue al puntero del mouse quisiera porfa que me ayudes o me guíes gracias

    • Hola estimado Jose, yo he tenido la misma pregunta que tú ya que si lo coloco como fondo al momento de guardar la imagen solo se guarda los puntos (capa current), para insertar una imagen en el canvas, en el evento INIT colocar esto:

      // Imagen
      var img = new Image();
      img.src = «ruta_imagen/foto.png»;
      img.onload = function() {
      canvas.background.context.drawImage(img, 0, 0);
      }

  3. Oscar recibe un cordial saludo, soy nuevo en este tema, lo comprenderas hay cosas que me falta comprender, por favor podrías enviarme el archivo html que funciona con PaintCanvas.js

    Muchas Gracias.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.