Code Your Own Online “Paint Shop” App: New Premium Tutorial

Siddharth on May 6th 2009 with 43 comments

For this week’s Premium tutorial, I will teach you how to replicate this excellent Flash based drawing application. But instead of sticking to good ol’ Flash, we are going to use the canvas element and some spiffy jQuery UI elements to achieve the same functionality. Intrigued? Let’s dive in!

Join Tuts Premium

For those unfamiliar, the family of TUTS sites runs a premium membership service called “Premium”. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies at nettuts+, psdtuts+, and vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!

Siddharth is Siddharth on Codecanyon

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By Siddharth

Rollover to read this author's bio or click through to see a full list of posts by this author.

Hola! I'm the associate editor here, editor of Windows.AppStorm, the lead reviewer at CodeCanyon and a reviewer at ThemeForest. When I'm not working for Envato, I'm a web developer/designer with expertise in JavaScript, PHP and Ruby . I am passionate about web technologies and video games and I really think code *is* art. It's a well known fact that following me has brought people great fortune and a lot of cuddles!

Plus Premium

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more

http://www.broof.de BroOf
Wow, looks awesome!
http://myfacefriends.com Myfacefriends
yes it is!
http://creativityden.com/ Liam McCabe
tuts+ tempts me one more,…
hmmmm

choise
dito
w1sh
Me too. This app looks great for drafting a design with co-workers. Integrate this into the company site and you’re in business. ;)
Rick Bross
im with yah man.
http://hiddencss.com Daniel [HiddenCSS]
So tempted to go Tuts+ now…. Just don’y have the money as a student though!

KAZI
Argh, I hate not having a Tuts+ account *sad* Maybe I’ll by one soon.
http://joeldrapper.com Joel Drapper
Why not just put sponsored ads on the site rather then this tuts plus program?
I would have tweeted, and I’m sure many others would have tweeted, bookmarked, etc. this post bringing more traffic, more subscribers, etc.
I see you do have ads in the sidebar – is tuts+ really necessary?

http://www.johnathan-barrett.me.uk Johnathan
Yes, it makes people like me who pay feel special :P
http://net.tutsplus.com Jeffrey Way
It’s a matter of paying for these big tutorials. It costs us a great deal of money.
w1sh
It’s a fair deal. They give us a bunch of high-quality, free tutorials, and occasionally post a Plus one.
Besides, if you use CS, then $9 a month for really high-quality tutorials in every program is a pretty great deal.
http://another-perfect-world.org/ Vasili
Like Jeffery says in almost every screencast about tuts+, $9/month really isn’t that much money. If you work for a hour (depending on your work), you’ll be able to pay for this. It’s really not that bad when you think about it. :\
Plus, tuts+ pays thousands of dollars a month for Amazon S3 storage. Along with hosting and paying authors, the least you can do for such an amazing website is spend $9/month. It doesn’t even have to be for 12 months straight; you could pay for only 4 months, it’s still helpful.

visual
May be those who can’t pay can come together and try to write a tutorial identical to one that is on plus :-)
innovator
the money for the tuts+ isn’t a problem but the medium of payment rather.

http://freecss.info Free CSS Templates
Money makes the world go round my friend. I will check the tutorial out, could possibly be useful for one of my upcoming projects.
http://www.cfdesignz.co.uk Craig Farrall
Jeff, you never seize to amaze me, how you know all this stuff, and make great tutorials out of them, you really are a true role model for the younger people like myself. You really do have me wanting to get this plus account.

http://www.jeff-way.com Jeffrey Way
Thanks, Craig! But I can’t take credit for this tutorial.

http://chrisberthe.com/ chrisberthe
Cute smileys Jeff :p

Siddharth
Author
I drew them actually. Jeff drew those tacky Tic-Tac-Toes. :-)
http://chrisberthe.com/ chrisberthe
Sorry, misread who the tutorial was by . Thanks Siddharth :)

joell lapitan
me too, all this PLUS tuts tempts me to avail tuts+ program, but i don’t have enough money..
well, i was trying to submit tutorials here so i can join tuts+ but they are not approved.. my ideas are not that good.. maybe i just need more inspiration.. haha..

http://myfacefriends.com Myfacefriends
@Joel try in other time, i know you can do it., and im waiting for your tutorial… Mabuhay.

WebberPL
Why i cant pay for subscrib with Moneybookers? :(
I dont have a credit card so i cant pay with paypal…
Please, add moneybookers to payment methods.
Yeah, i now, my english is so bad :)
http://www.slojoomla.si Sass
Really great stuff here.
I have only read titles here for a few months and then decided to pay subscription.
And i can say, that this was smart step. I dont need ebooks anymore, i just need to read and listen Jeffrey.
Anyway, more tutorials like this – i love jQuery.
Matt
Siddharth…..that name sounds so familiar….
this might get deleted but siddharth, are you from gimper.net?!
if you are, i havent see you around lately!!
Dave
I’m always amazed that this is even causes conversation. I learn more from this site than I do at university. I think $9 is amazing value for money
http://www.dsaportfolio.com.br/ Diego SA
Oh God, the plus membership just provokes me. It annoys me…

Chesham
Arg, ditto. Why are all the cool tutorials plus nowadays? :(

Shuuun
all good? :P In my eyes its the first you cannt grab by google in any kind ;)

http://rcthegreatblog.com Rahul Chowdhury
Man, this tutorial is awesome. It would be great to build a Paint Application, and that’s online for my users. Thanks a lot for it.

Siddharth
Author
Thanks for the kind words. I’m happy you liked it.

Shuuun
First PLUS tut i really want to know and i have to check the price for PLUS !
I will get one if there are more interessting tutotials in PLUS in near future!
Adel
oh God, this is sooo great, Jeff please is there any other way than this D#@* paypal thing to register, I could not make an account there because I’m in a region which they don’t support, come on… pleaaase… I’m dying here
http://chris.kovalenko.co.uk Chris
Awsome I know exactly where to implement this into one of my websites :) Should be a fun app to use.
Thanks :)
And Tuts+ is well worth the money, works out in british punds to roughly £4.50 a month!! This is northing for the skills and knowledg you gain, and you get to keep the tuts so its all worth it.
http://chris.kovalenko.co.uk Chris
Just being using the demo, and it dosent seem to work in IE7 ? this is a big flaw in the Tut if so. Only worked in FF.
Also how could you enable it so after they had drawn an image it could be saved?

Siddharth
Author
Right click -> Save Image As. The image is saved as a transparent PNG.
Internet Explorer doesn’t support the canvas element. Fret not though. Google has the excellent ExCanvas library for this very purpose.
http://code.google.com/p/explorercanvas/

http://www.theredrooms.net Patricia
Thanks for a wonderful post, dude
http://laranzjoe.blogspot.com lawrence77
Siddharth where you from?
A nice tutorial on the way, but its a plus one! :(