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: