Paint board with canvas

On the occasion of a possible project I started researching on how to make a kind of «paint» in the web. I knew the existence of canvas but it wasn’t very clear what could it do and compatibility issues of browsers that could have.

In the end I developed a jQuery plugin which everyone can could use. And here’s a DEMO.

Instruction of use:

  1. Insert jQuery in our web site
  2. Insert a reference to the plugin canvasPaint.js
  3. Insert this code, making reference to a «div»:
    var canvasManager;
    $(window).load(function () {
         canvasManager = $(".canvas").canvasPaint();
    });

The plugin by itself only works in modern browsers, but not in IE7 or IE8. If we want it to work on these we need to rely on the PRO version of another plugin, FlashCanvas. And this is why the plugin is initialized in the «onload» of the window and not in the «onready» as is often common. We need to be sure that FlahCanvas is executed before. With this plugin it will run properly in IE7 and IE8 but slower.

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

Once initialized the plugin and thanks to the reference that we get «canvasManager», we can call all methods that are:

Method Parameters Description
activateCircle  – Select the tool for drawing filled circles
activateEmptyCircle  – Select the tool for drawing circles
activateEmptyRectangle  – Select the tool for drawing rectangles
activateEraser  – Select the tool for erasing
activateLine  – Select the tool for drawing lines
activatePen  – Select the pen tool
activateRectangle  – Select the tool for drawing filled rectangues
activateSpray  – Select the spray tool
changeFillColor Color Change the fill color
changeOpacity 0-100% Change the opacity
changeSprayDensity 0-100% Change the density of the spray tool
changeStrokeColor Color Change the color of the lines
changeStrokeSize pixeles Change the width of the line
clearAll  – Cleans all the canvas
loadBackgroundImage URL Load a background image
redo  – Redoes the last operation
undo  – Undoes the last operation

Adjuntos

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.

Loading Facebook Comments ...