Instructions Will Show Below. Add Text With The Text Box On The Right, Add Extra Images By Clicking Images Below The Canvas

Image Uploading
• Text:
• Font Family: Calibri Arial Verdana Impact Serif Monospace Helvetica Tahoma Gadget
• Font Colour: Black Red Blue Green White Yellow Pink Gray Purple Silver Gold Orange
• Text Stroke Colour transparent White Black Red Blue Green Yellow Pink Gray Purple Silver Gold Orange
•  

Free Web Developer Tutorials With Working Demos Here

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

This is a simple Demo by Chris Bloor on how you can build a html5 image editor, it uses Eric Rowell kinetic.js library, his book is available to buy online, I bought it from www.amazon.co.uk, you can click on the image of the book to take you straight to the book on Amazon UK.

If you can't see anything on the image editors canvas you will need to use a modern browser, because many people use IE with Windows XP then I recommend Firefox and it can be downloaded here Firefox Download Windows XP does not support IE9+, IE8 and below do not support many html 5 tags.

The heart image is static, the teddy can be dragged and resized by clicking when the mouse curser changes to a pointer it can be clicked on all 4 corners to re-size.

Click on the images below the canvas to add them to the canvas and drag and drop into position, double click on them to remove them, you can add text by typing text into the text box, change colour and font family and click add text, again you can remove the text by double clicking on the text.

Download all the files from my tutorial site Html5 Image Editor Tutorial And Download