In this Premium tutorial, using the HTML5 Canvas and File APIs, we'll create a full-blown picture editor, with features on par with some desktop applications - including simple transformations like skewing and rotating, and more complicated filters like Gaussian blurring, embossing, and edge detection. For this, we will use the EaselJS library and jQuery.
Let's take a look at the final result we will be working towards:
Note the huge set of features:
- Ability to load and save image files from and to your hard drive
- Built-in print capability (that doesn't print the UI elements)
- Undo/redo memory
- Multiple layers, including text layers
- Simple transformations: scale, rotate, skew, flip
- Complex filters: brightness, colorify, blur, emboss, sharpen, and more
- Basic scripting capabilities
Rather than explaining how to build this app line-by-line from scratch, the tutorial starts from the finished source code and explains how each section works, as well as the theory behind concepts such as the Gaussian blur filter. The full source code is also available to download and modify.
Read the Full Tutorial
Premium members can access the full tutorial right away!
If you're not yet a Premium member, you can still read the first few steps for free.
Tuts+ Premium Membership
We run a Premium membership system which periodically gives members access to extra tutorials, like this one, from across the whole Tuts+ network. If you're a Premium member, you can log in and read the tutorial. If you're not a member, you can of course join today!