Fun with HTML5 Canvas ( HTML5 Canvas Free Hand drawing)

Submitted by naughty_david on Wed, 02/09/2011 - 22:34


Demo


Fork the code at Github
I have worked on HTML5 Canvas before, for building a Flow Control design application. It was built entirely on HTML and Canvas with jQuery to support.
This is my second trial. What i have tried to build is Free hand drawing tool using Canvas. It is easy to achieve this. The only issue with Canvas is that once a stroke have been made there is no way to edit it, Or make any alterations to the content of the Canvas.

Building a drawing tool will require some additional options like Color selection and Brush size. But the real fun started when i tried adding the Undo Button. I thought it was not possible. But one of a great feature of Canvas made it easy.

Canvas contents can be exported as data. 

canvas = document.getElementById('id-of-canvas');
var imageData = canvas.toDataURL('file-encoding'); 
//Encoding can be image/png or image/jpg
//I Think more formats are supported
The idea was to cache the data when ever the user makes a change. Its similar to take a snapshot of the canvas each time the user makes a change. And when the user presses the undo button, we just have to clear the canvas and load the imageData to it.
Tags: 
HTML5
Javascript
jQuery

Comments

RJC (not verified)

Fri, 02/25/2011 - 00:40

The demo page unfortunately does not work on IE8. I see that you've included ExplorerCanvas in your code, but it doesn't seem to make the demo work. Have you been able to resolve this in an updated version of your demo?

naughty_david

Mon, 03/14/2011 - 15:25

Hi,
Well i had tested the demo page in IE8, The canvas seemed to work. Though the main function of drawing was not that good. It was full of glitches.!!
See if you can find anything in the logs as errors.. will check it!
Cheers

Rafael (not verified)

Tue, 04/19/2011 - 20:40

Hi guys!
(First of all, i'm sorry because of my English skill, that isn't good)

I'm trying to include your great code in a draggable light-box but, when the user ends his "drag action" the properties "top & left" had changed. It doesn't break the execution but the user cant draw at the new location.

Any ideas?

Ty guys!

naughty_david

Sat, 04/23/2011 - 21:45

Hey Rafael,
its probly cos of the position of the canvas.
in my demo the canvas is positioned normal..
but when its put in a lightbox it will be positioned relative to a container which is positioned absolutely..
you might need to add some compensation for this to get the drawing work correctly..
see if you can find it or share the code on jsfiddle
Cheers.

Romiazon (not verified)

Thu, 06/16/2011 - 14:25

Can you guys help me how will I implement the freehand drawing part like what is done in paint because im currently studying html5 at the moment and javascript as well. I am still a beginner :)

naughty_david

Fri, 06/17/2011 - 11:27

Hi Romiazon,
You can get the code from the Demo page. Its inside the html file. Its pretty easy if you know the basics of javascript. Also there is a book out called Foundation HTML5 canvas. It could help you learn all the advanced concepts in Canvas.
Cheers

Romiazon (not verified)

Wed, 06/22/2011 - 11:26

Thank You! I'm on the part of doing the option on brush size :) done with option for colors.

naughty_david

Sat, 06/25/2011 - 11:54

I wanted to try a different approach lately allowing users to select each drawing as a different layer and even letting them add images.
let me know if you are moving in similar lines..
Thanks

dude (not verified)

Wed, 09/28/2011 - 13:50

It doesn't work and have tried it on the latest versions of Safari, Opera, Chrome and Firefox, all on Mac OS X Lion. Is this supposed to work only on PCs?

naughty_david

Thu, 09/29/2011 - 09:17

It should work on all these browsers on any platform.
Why don't you try some tweaks on it. Get the code here
https://github.com/naughtydavid/canvasFun

Salvo (not verified)

Wed, 10/03/2012 - 16:27

Hi,
i really like your code and i wanted to use for a little project, but i needed it's to put an image and then draw over it. So i tried usind drawImage() or just with CSS putting as back-ground the pic i want; the 'issue' is that in the first and second case the code doesnt work anymore, i can't save and it draws wrongly. i tried in other ways but everytime i put an image with drawImage it seems not working! I ask you if by chance you worked on it or if you have some suggestion. Thank you in advance.

Go Home Doodle, You are drunk