HTML5 Gallery » canvas

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/

Endless Mural

Derek Johnson — Thu, 16 Jun 2011 14:00:12 +0000

A web app by Eric Fickes that uses canvas to create shapes and drawings based on users’ mouse gestures. The help section uses a video element.

URL: http://endlessmural.com/

Pirates Love Daisies

Derek Johnson — Thu, 19 May 2011 14:00:31 +0000

A highly entertaining and well designed HTML5 tower (daisies!) defence game.

The action takes place in a canvas, and both sessionStorage and localStorage are used to store game data. When you play a game then shut down your browser, your scores are stored for the next time you visit the site. The sounds used in the game are also played via the audio element.

URL: http://www.pirateslovedaisies.com/

NakshART

Derek Johnson — Wed, 06 Apr 2011 14:00:37 +0000

A nice little web app that uses your location to show you the position of the stars, planets and constellations in the night sky directly above you, and draws them on a canvas.

URL: http://www.nakshart.com/#