Build a canvas image editor with canvas

GFX9.COM share Build a canvas image editor with canvas, you can download now.

We're not going to go wild with it, there just isn't time, but we'll be seeing how easy it is to do things like rotating, resizing, translating and even subtle color manipulation. Don't kid yourselves that we'll finish up with an equal to Photoshop, although that is in theory possible, but considering we're working within the confines of nothing more complex than a browser, personally I still think it's pretty remarkable.

This tutorial includes a screencast available for Tuts+ Premium members.

What you'll need for this tutorial

To produce a working version of the demo locally you'll need to use a Webkit-based browser such as Safari or Chrome, or Opera. The demo will work in Firefox, but it will need to be run through a web-server for most of the functionality to work. Don't even think about using IE; only version 9 even approaches support for the canvas element, and to be honest, I wouldn't even trust IE9 to render the code and functionality correctly.

Getting started

The underlying HTML is really quite trivial; all we need for the structure of the editor are the following basic elements:

		Canvas Image Editor 

Save the page as image-editor.html. Aside from the standard HTML elements making up the skeleton of the page we've got a custom style sheet, which we'll add in just a moment, and a style sheet provided by jQuery UI. At the bottom of the page, just before the closing tag, we've got a reference to jQuery (current version at the time of writing is 1.4.4), a reference to jQuery UI (current version 1.8.7) and an empty script tag into which we'll put the code that gives the editor its functionality.

The jQuery UI components we'll use in this example are resizable and dialog, and the theme is ui-lightness.

The visible elements on the page are quite basic; we have an outer containing

element, within which reside two
elements. The first contains the element that we'll use to manipulate our image. The second contains a toolbar of buttons that will be used to do the manipulations. From the id attributes given to each button it should be fairly obvious what each button does.

Adding the styles

Like the HTML, the CSS used is extremely simple, and consists of the following:

#imageEditor { width:482px; margin:auto; padding:20px; border:1px solid # 4b4b4b; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; background-color:#ababab; } 
#editorContainer { display:block; width:480px; height:480px; } 
#editor { display:block; margin:0 20px 20px 0; border:1px solid # 4b4b4b; } 
#toolbar { display:block; margin:20px 0 0; } 
#toolbar a { margin-right:10px; outline:none; color:#4b4b4b; } 
#resizer { border:2px dashed #000; } 
#tip { padding:5px; margin:0; border:1px solid #000; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; position:absolute; background-color:#fff; background-color:rgba(255,255,255,.3); -moz-box-shadow:1px 1px 1px rgba(0,0,0,0.5); -webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.5); box-shadow:1px 1px 1px rgba(0,0,0,0.5); }

Save this as image-editor.css in the same directory as the HTML page. There's nothing truly remarkable here, mostly the styles layout the editor and its constituent elements in the manner illustrated in the below screenshot:

Full Screencast

The fun part

All that's left to do is add the code that makes the editor work. Start by adding the below code to the empty

Similar content