Category: JavaScript - Editors

A small and easy to embed HTML5 open-source drawing board component. Add it to your site and let your visitors draw anything they want. With some server-side programming you can save their drawings to the server, create galleries, contests, let them draw their avatars, or create a cool lovely site like Draw a Pig.


How To Use or Embed It
RoCanvas is a component and not a complete web application. While it works even if you just open rocanvas.html, it will not save the files to your server. The best way to use it is to copy the HTML code of the within the body of the page and place it in your CMS or framework so the page fits your design. Make sure you include the javascripts and the CSS files, and change the relative paths if required.


Feel free to change or remove the button and form for saving the image. It's there just to make your life easier in case you want to let the user save their drawing.


How To Save The Drawing On The Server
You can add URL to a server-side script in the ajax call in the RoSave javascript function. Your script will receive the values as POST variables. The image data comes in Data/URI format. You can save this data directly in a TEXT or BLOB field in your SQL database.


Then retrieve the data and simply output it in <img src= tag. For example in HTML/PHP this would look something like:
<img src="<?php echo $image['image_data']?>">


Saving Data/URI as image file with PHP is kind of a problem. I welcome any suggestions about this. Date: 13 October, 2011

Editor Rating:

Canvas - Drawing App - Html 5 - Draw - Component - Galleries - Contests - Avatars