Latest
Hanov Webdraw uses the canvas element to create a imprecise line drawing vector graphics application. Imprecise drawing gives the appearance of ‘hand drawn’ and can be especially useful to get across the point that whatever you are drawing is not the final version. 
Looks better than the actual site...
Hanov Webdraw has the following features:
- Box, circle, lines, and curve primitive shapes
- Shadows when supported by browser
- Text in several hand-drawn fonts rendered on the server
- Rotate & scale shapes individually or in groups
- Save drawing to a browser bookmark
- Select colours using an HSV colour wheel.
- Unlimited levels of Undo/Redo
To draw a box or a circle, select the relevant icon from the toolbar and then click on the object created and drag and resize to the position you require. To draw a line, select the line icon from the toolbar and click to each point you wish to draw to, with a double click to finish.
Once you have placed your objects, selecting them opens a variety of options such as colour and thickness. Lines can be rendered in a variety of styles from the exact Draftsman to the neat artist to ‘drunk’, while curves can go from sharp to smooth.
Use the Webdraw application
A few years before the dawn of the iPhone, we all had Nokias with the addictive Snake game installed. The premise of snake was simple: eat all the food on the screen without hitting your tail or a wall. The more food you eat, the longer your tail became.
Paul Jensen has returned to that era for his addictive Snake canvas game, and has also provided a handy tutorial on how he created it.
Green dots never tasted better!
Comments from the author:
The canvas element is used to map the playing area of the game where the Snake moves. The Snake consists of a collection of xy coordinates on the canvas element, and the movement is simulated by drawing and removing the xy coordinates from the canvas element.
The tutorial itself is a handy guide for those who are a little unsure of where to start when it comes to using user interactions to manipulate the canvas from reading the key pressed to checking your object is still within the boundaries of the canvas.
Play the game, or check out the tutorial
We’ve previously featured a canvas emulator for Spectrum and NES – well, here’s another for the original Gameboy – this time created by Pedro Ladaria. JSGB contains the emulator and a debugger, and plays many commercial games. It uses the canvas tag for displaying graphics on scanline basis using putimagedata().
Retro gaming at it's greenest
Runs best in Chrome.
Please ensure you follow the relevant laws regarding ROMs for your country before trying this demo.
Check out the JSGB canvas demo!
Szenesprachenwiki is the German equivalent to Urban Dictionary, a wiki site dedicated to German neologisms, created by the makers of the German dictionary Dudan.
9elements, creators of the HTML5 Love demo, have used the data from Szenesprachenwiki to create a canvas representation of their Szenesprachenwiki service known as Konfetti. Using the categories on the right, users can filter the words that are available for viewing, and the dots sequence changes to match these colours.
Love for words
Using the Szenesprachenwiki words service and adding categories, it gives the HTML5 Love demo a bit more substance and meaning to the original demo.
Check out Szenesprachenwiki
Madcap Studios, formed by Eric Reedy and Nate Friedman, have made their canvas implementation more than just an application, using canvas for parts of their user interface.
Their iPhone comic book app looks rather cool
Canvas is used for the scrolling tile animation at the top of the page, and also for the revolving cog.
Please note: This site does not work optimally in Internet Explorer. Canvas animation has been disabled thanks to some framerate issues.
Visit Madcap Studios
Gil Megidish has a bit of an obsession with Another World, the famous platform puzzle game from 1991 also known as Out of this World in North America.
Over the years, he’s ported the game to PSP, PS2, GBA and PC.. and now he’s ported it over to canvas!
Retro gaming goodness
There are a few graphical glitches within the game due to the nature of the port, but the version is playable with patience and a great example of what canvas can do!
For those of you who are stuck from the start, you’ll need to swing the cage to escape and find a gun to stand a chance of survival! If you’re looking for further guidance, there are many walkthroughs available. Start at Part 2.
Check out the Another World canvas game
