HTML5 Gallery » canvas

Gethu Games

Derek Johnson — Tue, 27 Mar 2012 22:13:08 +0000

Two canvas based games – one a spirograph maker with adjustable parameters to allow users to create different shapes and colours. The other is a 9×9 versions of tic-tac-toe that has an audio track playing. Both games will run offline thanks to appcache.

Clever and fun!

URL: http://www.gethugames.in/

Picozu Image Editor

Derek Johnson — Sun, 25 Mar 2012 23:01:04 +0000

Picozu is an online image editor that uses the canvas element and other HTML5 technologies. Appcache is used to store images used in the app’s skin for offline use, and localStorage is used as part of the Facebook integration.

In the markup the menu element would be a good choice for the list of commands used, possibly with toolbar set as the type. There are also a couple of type attributes in the script tags, but other than that a very smart piece of web development.

URL: http://www.picozu.com/editor

CanvasLoader Creator

Derek Johnson — Mon, 19 Mar 2012 21:37:29 +0000

A nice little web app that creates a spinning loading graphic using canvas, with a VML fallback for non-supporting browsers.

The diameter, FPS, speed, colour and other variables can be tweaked to customise the graphic.

In the markup there is a header for a div rather than for sectioning content, and there are opportunities to use input type="email" and input type="color", but overall a nice use of canvas and HTML5 in general.

URL: http://heartcode.robertpataki.com/canvasloader/

Always data

Gerard Druiven — Mon, 02 Jan 2012 09:00:49 +0000

Website of Styro, a graphic designer and front-end developer based in Paris, France.

Good clean use of semantic HTML5 elements in this layout, although the “content” section element should probably use a div instead. The article element is used to enclose each entry and the time element is used for the post date, although the small element probably shouldn’t be used here. The canvas element is used to draw a diagonal red line in the page background.

URL: http://styro.alwaysdata.net

Wispy.me

Gerard Druiven — Fri, 09 Dec 2011 08:00:33 +0000

The application uses the canvas element to create a Wordle-like display of words from a user’s Twitter timeline. The flashcanvas JavaScript library is used for older browser support and the markup makes use of some of the new HTML5 elements such as header, section and nav.

It’s difficult to comment on the JavaScript canvas code that creates the text as it’s been minimised.

URL: http://wispy.me

Timer Tab

Richard Clark — Wed, 24 Aug 2011 14:20:11 +0000

An interesting little online web app. canvas is used to dynamically generate a favicon that displays the time left until the URL is opened. A manifest file is used so the app can work offline. localStorage is used to store the options.

URL: http://www.timer-tab.com/

#beerblogging

Richard Clark — Mon, 22 Aug 2011 14:09:17 +0000

A feed aggregator that uses a number of new elements and has a nice little touch of canvas when you mouse over the “beer”. I’m not so sure that the post title and author should be within a hgroup but as with lots of semantics it’s up for debate.

URL: http://beerblogging.org/

Net Lash Project

Gerard Druiven — Fri, 12 Aug 2011 11:30:25 +0000

More a script-canvas test, than it is HTML5, although does showcase how canvas can be used as an effective replacement for something previously done in flash. Within header, could be wrapping

and
could be used around image.

’s used ok but
used as a functional, as opposed to informative manner and repeatedly so. A div here would have been better. Really just an experimental site. We look forward to seeing the finished product!

URL: http://www.netlashproject.be/

HTML5 Tuts

Derek Johnson — Wed, 06 Jul 2011 17:00:01 +0000

An HTML5 tutorial and demo site created by Alex Jones as a university project.

Plenty of good demos here on a wide range of HTML5 features and APIs. In one or two places the article element is used without a heading as more of a generic wrapper, but overall a great resource and very well put together.

URL: http://www.html5tuts.co.uk/

DNA Model

Derek Johnson — Thu, 30 Jun 2011 23:14:41 +0000

A nice canvas showcase that lets the user perform some customizations of a rotating DNA double helix.

Developer Kasen Lam explains some of the technical hurdles experienced when building the app, “The nucleotides were first created using the createRadialGradient method, however the it would take around 1 -3 seconds to generate the animation, so images were used instead to represent them. Also, to avoid a flickering animation the elements are drawn offscreen and then copied into your onscreen.”

URL: http://sysnetik.com/labs/dna-model/