Draw

PhotonJam's Draw is an HTML5 drawing widget that lets you add drawing capabilities to your website. Get your user's creative juices flowing by letting them create their own drawings!

Add Draw To Your Site Now!

Draw

Draw drag me

How To Draw

PhotonJam is a drawing app made with HTML5. Use your mouse to draw. If you are on mobile use your finger or stylus to draw. For accuracy and best results use Draw on a computer running Chrome or Firefox web browsers and a mouse.

Add A Draw Widget To Your Site

Give your site drawing functionality by adding a Draw widget.

I use a version of Draw in my GIF Maker and LightBox apps.

Why would you want a a drawing widget?

Besides giving your users the ability to create their own artwork, the Draw widget can be configured to show your custom watermark text on every image it creates. That means it will advertise your site for you whenever the images are shared!

You can also create apps for your site that accept the drawn images into a database that you can later display on your site.

Your users will be able to:

  • Draw pictures!
  • Download their drawings.
  • Submit drawings to a URL you provide (your site must be configured to accept and do something with the image sent via POST data).

The Draw widget is an iframe app that should be compatible with most websites. All you have to do is add the iframe embed code below.

Get The Embed Code

The most basic iframe embed code with no options enabled looks like: (top green bar not included)

Just copy and paste the code into the HTML of your site anywhere between <body> tags of your site where you want the widget to appear.

Option settings

You can turn options on or off and set them by adjusting variables in the iframe embed code URL.

  • Allow your users to submit their drawings to a URL on your site by setting posturl=https://yoursitename.com/url/
  • Customize your watermark text by setting txt=YourText
  • Turn off watermark or submit URL completely by leaving txt or posturl variables out of the URL entirely.

Example embed code with both options set

Below is an example of the iframe code with all the URL variables set. Just edit the iframe's URL variables to suit your needs but be sure to keep the height and width as is otherwise the widget may not function properly..

How To Accept Image Submissions To Your Site

If you are accepting image submissions to your site and have configured the iframe embed code URL with a URL on your site to accept the image, you must grab the image via a POST variable. In PHP you would grab the image like $postedImage = $_POST['photonimage']. Once you have the image in a variable you can display it like echo $postedImage; or send it to a database using your own logic.

Need Help?

Contact me if you need help!

Terms of use

The code for Draw is not free but your use of Draw as an iframed widget is completely free as long as my link to PhotonJam is not obstructed in anyway. If my link is intentionally obscured I reserve the right to blacklist your site from using the app/widget. I make no warranty or guarantees for the app. While I have made every effort to ensure the app is reliable and as secure as I possibly can, you agree that you will not hold me liable or responsible in any way for anything that may occur from you or your users usage of the widget.




Your feedback is welcome.


Have fun!