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

Free Web Developer Tutorials With Working Demos Here

  • heart
  • balloon
  • caterpilla
  • Bear
  • Bear
  • Bear
  • Bear
  • cat
  • cat
  • cat
  • cat
  • squirrels
  • caterpilla
  • caterpilla
canvas book
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, 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

ChrisApril 23, 2012 Reply

can anyone help me with saving the canvas to the server the canvas is in the container div not on a canvas tag so the usual way is not working


chrisApril 23, 2012 Reply

Fixed This

$(\'#save\').click( function() {
stage.toDataURL(function(dataUrl) {
$.post(\"ajax.php\", { data: dataUrl },
function(data) {
alert(\"Your Design Was Saved To The Server\");

and then create a new file called ajax.php

$png =$_POST[\'data\'];
$filteredData=substr($png, strpos($png, \",\")+1);
$fp = fopen( \'image.png\', \'wb\' );
fwrite( $fp, $unencodedData);
fclose( $fp );

Xu YiJune 15, 2012 Reply


Can I ask you question please?

When you double click the small images below the canvas, the image added to the canvas dynamically.
How do you do this?

Can you help me please?


ChrisJune 15, 2012 Reply

Hi Ayi, here are a few links for you on the forum that will show you how to do it

and here is a working demo if you view the source code you can copy and paste it

you will need to replace the images with images of your own any problems let me know

good luck

AlexJuly 23, 2012 Reply


First of all thankyou for the image editor. Its helped me get started with a project im working on for a new website. I want to be able to dynamically load images into a html5 canvas that can be then dragged around the canvas area. With the help of this image editor ive managed this but I also want to beable to resize the images in the same way you can on the tutorial on html5 tutorials with anchor points in each corners but im struggling to get them added to each image with they are loaded into the canvas area. Is this something you looked into?

ChrisJuly 23, 2012 Reply

Hi Alex, thank you for the comment, if you contact me on the contact link above then i will help you via email if that is ok with you

Abhishek DubeyAugust 22, 2012 Reply

Hello ,
I want to find this code as shown in above pleae give me code for develop this functionality .
I am unable to purchase this from anywhere so please provide me code in my email

ChrisAugust 22, 2012 Reply

Hi Abhishek, the editor is mainly javascript so if you want the script you can just view the source and take it you need to include the kinetic.js which is version 9.3

and jquery

and the version1.js which is what controls the editor

if you need any help with your project let me know always happy to help

Thank you Chris

Abhishek DubeyAugust 23, 2012 Reply

Hello Chris,
I am very happy when i saw your response and want to give thanks for this .
Chrs i need some other and some different thing :
Actually i want to Edit map in PDF in this i can be able to drag and drop of bulbs
so for develop this type of functionality i need PDF or Image editor in that i can drag/drop and resize of canvas image .
If you have this type of any tool/code available on either free or from purchase so please give me or sugest me .

chrisAugust 23, 2012 Reply

Hi Abhishek, are you after away of loading an image of a map onto the canvas and then from there add markers and some text, once you have made the map you would like to save it as a PDF ? if so i can do this for you tonight.

Thanks Chris

Abhishek DubeyAugust 23, 2012 Reply

thanks for cordination
I want to save this editable image on to pdf.But i am still facing problem show /edit/drag/delete of imae in canvas element.
I have request to you can you please give me above code in zip with save in PDF .
I am waitnig for your response i know you will do it .
add me gtalk/skype : abhishek.dubey.acs

ChrisAugust 23, 2012 Reply

No Problem i will do this for you tonight


ChrisAugust 24, 2012 Reply

I have started to help Abhishek with his project, at the moment we have a static map where we can add speech bubbles to the canvas and then add text over the bubbles, we can then put the canvas into the CK Editor and turn the designed map into a PDF Application link below

If anyone needs help with any projects where this editor could be useful then please let me know

Thank you Chris

Abhishek DubeySeptember 12, 2012 Reply

Hi Chris,
I am come back ,since few days i was busy some where ,but now start working .
Now i am doing - save canvas with it background image to server but problem is that :
I am using to show background image of css
#container {
background-image: url();

and for canvas i am yoda: image_canvas
so both are different thing so i am unabel to use .toDataUrl so please help me .I know you are experienced to design this ,and hope will help me .

ChrisSeptember 12, 2012 Reply

Hi Abhishek, send me a link to your project

milciades91October 2, 2012 Reply

hello, hope you are fine as you want to ask a question like do to save the canvas in database

ChrisOctober 3, 2012 Reply

Hi, I would not save the canvas into the database i would upload the png file into a folder on your server and then i would save the route of the image into the database.

so you save the image in a folder called images
and in the database you save
myimage.png in the database

and then display the image with the route images/myimage.png
hope this makes sense

Thanks Chris

EdNovember 27, 2012 Reply

Hi Chris,

What you\'ve been doing here is very close to something I am trying to achieve using the Kinetic script but have hit a wall - could you help me solve this?
I\'m creating a drag and drop where I\'d like people to be able to save or share their image (of the canvas) so instead of the \'saved\' image opening in a new window (just like your preview), the generated dataURI would go into a placeholder (so the page can be styled) and then have the option to post to facebook etc - do you know how this is done - very similar to your map example, only I don\'t need to generate a PDF, just an image.
Any help you could offer would be much appreciated Thanks!

ChrisNovember 27, 2012 Reply

Hi Ed, contact me on the contact link in the nav and i will reply vial email or skype or msn

Thanks Chris

kucingDecember 30, 2012 Reply

Hye chris. Good job over there~!.

I am interested in doing the thing you have done there. But i do not know where to start and how to do it? Can you guide me on the steps? Because i am building a web application that function almost the same like you did.

Thank you.

kucingDecember 30, 2012 Reply

Hye chris. Good job over there~!.

I am interested in doing the thing you have done there. But i do not know where to start and how to do it? Can you guide me on the steps? Because i am building a web application that function almost the same like you did.

Thank you.

ChrisDecember 30, 2012 Reply

I have sent you an email any problems let me know and i will help you ASAP

Thanks Chris

PeterJanuary 17, 2013 Reply

Hello Chris, is a great tool! congratulations.
I created the ajax.php and with a developer tool I searched all pictures Js,... in the source code, but it does not work, perhaps there is something that I copy evil could send me the code please?
peter.crepel @
is for project with \"moodle\" and could use great
many thanks in advance.

ChrisJanuary 19, 2013 Reply

Hi Peter, I have emailed you the files you require
Good Luck

AmitJanuary 19, 2013 Reply

Hi Chris ,

Thanks for such great example and work. This example was really a great help for my current project.

I have a question regarding wordpress integration of canvas.

It seems is developed using wordpress? Can you please provide me some guidelines on how can I integrate similar thing in wordpress. Is there any plugin or widget available for this?


ChrisJanuary 19, 2013 Reply

Hi Amit, , I wrote the editor using kinetic.js library i dont use wordpress much a so i cant help you with a plugin, but it should not be difficult if you have wordpress experience I can send you the files if you wish

Thanks Chris

AmitJanuary 20, 2013 Reply

Thanks very much Chris for quick reply,

Please send me files on


catalinaJune 19, 2013 Reply

hello, I want to know how I can resize all pictures??.. please

chrisJune 19, 2013 Reply

Hi, you will need to add the images to anchor point, i will make this work in version 2

catalinaJune 24, 2013 Reply

How?? i don\'t understand you, because i don\'t know javascript.. do you can help me? please? u_u

ChrisJune 25, 2013 Reply

When i get chance i will release another version with all images resizable , you can get more information here, if you dont try you will never learn

Kulasekaralwar.December 21, 2013 Reply

Hi First i should thank you for your great job and helping other a lot i am started design my project using image editor. I want to load dynamic images and crop the images. Please help me to do this.

ChrisDecember 21, 2013 Reply

I have emailed you, any problems let me know

Your Response Comments closed due to spam

Flag Counter