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:
- Insert jQuery in our web site
- Insert a reference to the plugin canvasPaint.js
- 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 |
Dude, exceptional work! Thank you very much! you saved my life, this is exactly what i was looking for!
Muchas Gracias!
Best of all,
Thiago