Latest
As canvas gets more popular, we are beginning to see it being used for more diverse applications and tools. Take ChemDoodle, for example, an open source chemistry and chem-informatics toolkit where canvas is being used to solve common chemistry related tasks, displaying the molecules in a variety of different ways.
There are 6 different components to ChemDoodle, each of which use canvas to display the end graphics. Some also allow the user to interact through mouse and keyboard gestures.
ChemDoodle is incredibly comprehensive
- The Viewer component solves the common problem of representing molecules as image data. With canvas, images can be generated, and changes can be made without needing to redraw parts of the image.
- The Rotator component shows off your ball and stick and wireframe diagram rotating them on either a 2D or 3D axis.
- The transformer component allows the user to move (right click and drag), rotate (left click and drag) and scale the molecules (mouse wheel).
- The Doodler component allows the user to draw out molecules and save them out to a file.
- The MolGrabber component hooks up to an external database and uses canvas to return diagrams of molecules.
- And File Loader will load a saved file back in to the canvas object.
Kevin Theisen, the man behind ChemDoodle claims that ChemDoodle “will revolutionize how chemical data is handled on the web, by replacing images and applets with powerful and secure native browser components.”
It certainly seems comprehensive!
Visit the ChemDoodle site
Screen Shoot Me is a handy little tool designed for an age of the popular tiny URL and the need to instantly share media.
Screen Shoot Me, by Lucho Yankov, provides a quick and easy way for users to paste an image in their clipboard and make it available on the web in seconds using a shortened URL. If your copied image needs some cropping, that’s not a problem as you can modify your image before you save. Here’s on I made earlier.
The service uses the HTML 5 canvas element to show the image contents on the screen; and allow users to make edits before saving the final image to a shortened URL.
Is ScreenShoot the next big thing?
There are a couple of caveats to the service – the major one being that you need to have JRE installed and approve the applet so the application can access your clipboard information. The service also doesn’t run on Mac OS X.
Screen Shoot Me is only currently compatible with Firefox 3.5; although your saved images can be used on any browser.
As a couple of suggestions for improvements for Lucho, it would be nice to be able to include annotated text on the image; and also it would be more user friendly if the user interface was made to be pretty.
Try Screen Shoot Me
Image resizing has been around since the early days of paint programs, but the ability to be able to resize parts of a given image based whether it’s content is considered important is a relatively new technology. Stéphane Roucheray’s Content Aware Image Resizing demo uses the canvas API to display the dynamically resized bitmaps, showing updates as the algorithm calculates which parts of the image should and should not be resized.
The spaceman isn't squished using this technique
How does it work?
First, the algorithm generates a grayscale image from the source. From the grayscale image it generates an edge detection and energy map. The algorithm then runs from the bottom to the top of the energy matrix looking for the pixel with the lowest energy, creating what is known as a seam of least energy. This seam is then removed from the original image and the result is becomes the source image to repeat this process again until the image is of the desired size.
Try the demo!
Bert’s Breakdown, created by Paul Brunt, is a beautiful looking platform game where you have to go around the level collecting Euro coins while avoiding deadly spiders. While some of the coins are straightforward to collect on your route through the level, others can be found hidden in the clouds; and some require to use mushrooms as springs to reach higher areas.
Bert stands by some flowers, contemplating how much money he will make today
This was Paul’s first venture using the HTML 5 canvas element, and although he had a few minor issues, he found that he could build what he needed “surprisingly quickly”. Paul claims, “the whole game, graphics and all, only took about 100 hours” – it sounds a lot, but when you check out the quality of the game, you can see where that time has been spent.
Works best in Chrome; and supports the Chrome Frame plug in for Internet Explorer.
To play the game, use the cursor keys to move left and right; and the space bar to jump.
Thomas Saunders has been making waves with the canvas element with his Wave Form canvas demo.
It, er, looks better in action..
Adjust the sliders along the top to change the wave form. It’s possible to make your wave dance in an almost seductive way. Give it a go!
Check out the Wave Form demo!
This sweet canvas-audio visualisation nicknamed “HTML5 Love” is courtesy of IO from 9Elements. HTML5 Love combines both the HTML5 canvas and audio elements with updates from social networking site Twitter.
Love HTML5? Love Canvas!
IO blogger Sebastian Deutsch says:
The music will only be played if the browser supports the audio tag. To detect if the audio or canvas feature is present we use the awesome modernizr library. We could have used a fallback solution like playing the sound via Flash. But this experiment is about HTML5 – and who needs Flash anyway?
Works best in Firefox 3.5.
Check out the HTML5 Love demo!
