RoCanvas

5 Rating of RoCanvas

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: 5 Rating of RoCanvas

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

Homepage: http://re.trotoys.com/article/rocanvas/

Developer: Retro Toys

License: Apache License

Operating System: Windows 2000, Windows NT, Linux

Add a Comment

all are required fields

     
What do you think of this resource?

Current User Rating: 5 Stars

Select Your Rate:

Votes:1

 

Related Scripts Download

Easy Chart class helps to generate charts using HTML5 canvas.

developer Developer: Arturs Sosins
license License: BSD License
operating systems Operating System: Not Available


Canvas Events class extends canvas object to help to attach mouse events to different shapes with minimal javascript code modifications

It supports all native canvas context methods.

developer Developer: Arturs Sosins
license License: BSD License
operating systems Operating System: Not Available


Canvas Turtle class provides LOGO Turtle Graphics Javascript API and LOGO Turtle Graphic language interpreter for drawing objects in Canvas.

developer Developer: Arturs Sosins
license License: BSD License
operating systems Operating System: Not Available


Canvicon class provides a way to animate your website's favicon using canvas.

developer Developer: Arturs Sosins
license License: BSD License (original)
operating systems Operating System: Not Available


This configurable button loads quickly.

developer Developer: Sunit Katkar
license License: Freeware
operating systems Operating System: All


FXSvgCanvas is a managed canvas widget for FXRuby allowing manipulation of internal graphical pseudo-widgets (inspired by Tk canvas widget).

developer Developer: rubyforge.org
license License: Artistic License, GNU General Public License (GPL)
operating systems Operating System: Windows, Linux, Mac OS, BSD, Solaris


Firefox, Safari and Opera 9 support the canvas tag to allow 2D command-based drawing.

developer Developer: SourceForge.net
license License: Freeware
operating systems Operating System: Windows, Linux, Mac OS, BSD, Solaris


Elefant is a minimalist web framework for PHP 5.

developer Developer: Johnny Broadway
license License: MIT/X Consortium License
operating systems Operating System: Not Available


This is a contact form which has the following features: - Checks that the e-mail address is in the a@b.

developer Developer: Jason Gillyon
license License: Freeware
operating systems Operating System: linux, windows