RoCanvas - HTML 5 Drawing Board Component

What Is RoCanvas

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.

Download RoCanvas

Click here to download the full source code (.zip, 4KB)

See demo of how RoCanvas works (or click on the picture)

RoCanvas is also hosted at Githib. Visit the RoCanvas repository and click on the Downloads button at right to download .zip or tar.gz.

Forks are welcome!

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:

Saving Data/URI as image file with PHP is kind of a problem. I welcome any suggestions about this.

Why RoCanvas

The name RoCanvas comes from Robot and Canvas. The reason is that this drawing board component was first used for our Draw a Robot application. You can check it to see how RoCanvas works in live app.

License

This component is licensed under Apache license which in short means you can use it even in commercial applications. Note that some code has been inspired or inherits the code given in this tutorial.

If you liked this article subscribe to our Free Newsletter

Please use nickname or real name when posting comments. Comments with "SEO" names like "wooden toys store" etc. will be deleted and the author will be banned.