The HTML5 Canvas element promises web developers a web-native way to create animations, interactive charts and even full-fledged apps like image editors and complicated games. Canvas may well be the best thing about HTML5. But unfortunately, it can be kind of a pain to work with, especially for those coming from a Flash animation background.

Easel JS is a JavaScript library for working with the HTML5 Canvas element. It was created by developer Grant Skinner and his cohorts at gskinner.com. Skinner is probably best known for his work in Flash, and the Easel Library adds a number of tools that make Canvas a bit more approachable for Flash developers (and everyone else as well).

Canvas’ biggest drawback (compared to Flash or SVG) is that it has no internal concept of display objects. That means you have to manage updates manually (see our earlier posts for some more tips on working with Canvas). The gskinner blog post has some more details on what Easel JS does, but the main points are a core interaction model with a full, hierarchical display list and helper classes to simplify working with Canvas.

Easel JS is currently an alpha release, so proceed with caution. The code is available under the MIT license and full documentation can be found on the docs page. Skinner says that, once Easel reaches the beta stage, the code will be moved to GitHub and opened for outside contributions and improvements.

See Also:

• Building Better HTML5 Games With Canvas
• Tips and Tricks for Better HTML5 Canvas Animations
• Google and Arcade Fire Get All HTML5y

There’s a new conversion tool for fans of Adobe’s popular Illustrator desktop publishing app that lets developers export their vector drawings and animations as HTML5 code that runs natively in the latest web browsers.

The new tool is called Ai>Canvas, and it does exactly what the name implies. You can take any vector illustrations you’ve made in Adobe Illustrator and export them as 2D graphics that can be drawn on web pages using the HTML5 Canvas element. It can even animate your drawings.

The plug-in can handle gradients and transparencies, complex pattern fills, drop shadows, complex line styles and text, exporting everything as HTML5 Canvas code. In cases where your illustration contains something that can’t be done in Canvas (like an opacity mask) the plug-in rasterizes that bit and positions it properly.

The plug-in also supports commands for animation. You can add rotation, object scaling, fades, and movement along a path. All of your parameters are defined inside Illustrator, but when you export to HTML5, you can tweak the resulting web code to fine-tune the results. You can also add interactions, like sounds, or click events.

The plug-in works in Illustrator for Creative Suite versions 5, 4 and 3. There are versions for Windows and Mac OS X.

Oddly, it doesn’t come directly from Adobe. It’s a product of Microsoft’s Mix Labs, an initiative the company has set up to experiment with open web technologies. Microsoft has taken a larger interest in open web standards ever since work began on building in support for HTML5 and advanced web technologies into Internet Explorer. The next version, IE9, is already in beta, with the final version due some time next year.

The creator of the plug-in, Microsoft developer and platform evangelist Mike Swanson, is also the author of the XAML exporter for Illustrator. He got interested in HTML5 and Canvas after a passionate conversation about the technology with his co-worker, Thomas Lewis. You can read the whole story — and see some of his working examples and test files — on Swanson’s blog. Lewis has written his own post, as well.

Adobe Labs recently released an SVG pack for Illustrator which can export drawings as SVG that run in browsers that support the format. But this new Ai>Canvas exporter uses HTML5 Canvas, which is quickly becoming widely adopted by developers working on games and virtual worlds that run in the browser. Check out the Asteroids and Rumpetroll experiments for some cool Canvas work.

See also:

• Tips and Tricks for Better HTML5 Canvas Animations
• Play Pac-Man in HTML5
• Take a Peek Into Rumpetroll’s HTML5 Pond

This may be the most bizarre chatroom ever created.

It’s called Rumpetroll. In Norwegian, the word means “tadpole,” but the literal translation is “ass troll.” It’s a very clever name, as Rumpetroll is a chat room.

Enter, and you’re dropped into a color-shifting primordial soup with a bunch of other tadpoles (that also happen to look like sperm). Click around with your mouse to swim around and join up with other groups. Type to chat, and enter “name: Mike” to give your tadpole/sperm a display name.

The visual environment is powered by Canvas, JavaScript and CSS 3. It also uses WebSockets, a technology which allows persistent client-server connections. It exemplifies how web standards can be used to write a front-end that turns the most banal and simple web app into something unique and interesting.

Because of these leading-edge technologies, you’ll need a modern browser like Chrome, Firefox 4 or Safari 5.

I’ve been hanging out in Rumpetroll all morning. I’ve gone on some fruitless adventures into the abyss. I also met some Russians. I’ve even encountered a few users who have learned how to hack the site’s JavaScript to increase the size of their tadpole, or speed it up so they can fly around at amazing speeds.

The creators are four hackers from Oslo, Norway: Daniel Mahal, Hans Petter Eikemo, Hugo Ahlberg and Simen Brekken. Kudos!

See also:

• JS1k Contest Highlights Tiny, Powerful Code Experiments
• ‘Kick Ass’ Bookmarklet Turns the Web Into Asteroids
• Play Asteroids in HTML5

A developer named Kevin Roast has created a slick demo of the arcade classic Asteroids using the Canvas element inside HTML5.

Use the arrow keys and the space bar to control your ship. Also highly recommended: press “R” to switch to the retro-styled graphics. The complex polygons of the modern graphics are harder to see (sorry, Kevin).

Canvas is the part of HTML5 that lets developers create 2D animations — you can draw polygons on the screen, then manipulate them with JavaScript, or the mouse and keyboard (usually both). It’s one of the technologies that intrepid web authors are using to replace Flash for simple animations and games like this one. Granted, Canvas has a long way to go before it can replicate what’s possible today in a Flash game, but we’re seeing the baby steps happen. And as browsers get faster, the baby’s stride grows.

Originally developed by Apple, Canvas is now part of the HTML5 draft specification and is supported by most major browsers. IE8 is lacking native support (it works with this add-on) but IE9 will fix that when it reaches the beta stage later this month.

Kevin’s demo has been around for a couple of months, but we’re revisiting it because the author has taken the original code and created a brand new Canvas benchmark tool to test how quickly and smoothly your browser can render HTML5 animations. Run his new test code and you’ll see a game simulation with more asteroids than your browser can handle.

Also, when playing the actual game, you can recreate this effect by pressing the “A” key as you fly around. This adds new asteroids to the playing field, so you can test your browser and your skills.

See Also:

• Play Pac-Man in HTML5
• Google Shows Off Its Bouncy Balls
• Tips and Tricks for Better HTML5 Canvas Animations
• Who Needs Flash?
• Turn Your Vector Art Into Canvas-based Animations With Opacity

First, there was the Google homepage experiment from Tuesday, which laid out the Google logo in bouncy balls you could click on, jiggle, and bounce. It was done in JavaScript and CSS — contrary to popular belief, it was not HTML5.

Then there was Rob Hawkes’ hack, written in HTML5 canvas.

And now, this: a website where you can post whatever message you want (within the character count limit) and make your own interactive bouncing balls animation. It’s written using Rob’s code.

Long live the web.

Updated: This post originally said Rob’s code was SVG — that was a mistake, it’s HTML5 canvas. Our original post even got it correct. Sleeping at the wheel!

Programmer Dale Harvey has created a playable version of Pac-Man using only web standards.

To rebuild the same gameplay found in the arcade classic using browser-native code, he’s relying on local storage, HTML5 audio, Canvas and @font-face. Harvey is sharing all the code on Github as well, so you can run it locally.

Reminiscent of Google’s recent Pac-Man port, Harvey’s attempt is yet another example of web standards being used instead of Flash to create animated, interactive experiences in the browser.

The Flash plug-in is still the most popular platform choice for browser-based games, and it has some advantages over HTML5. Most notably, a Flash game would work in any browser that allows the plug-in, but to play Harvey’s game, you’ll need to use a browser that supports the elements he’s using — Firefox, Opera and Chrome work just fine, but IE8 is a no-go.

On his blog post about the project, he notes some of the other stumbling blocks he encountered when porting the game. For instance, there’s no easy way to loop HTML5 audio, there isn’t a convenient tool for drawing Canvas shapes, and using Canvas/HTML5 for a game even this simple still puts more strain on your CPU than using Flash.

[via Hacker News]

See Also:

• CSS3 Pie Lets You Have Your CSS and IE It, Too
• Chrome Shows Off Some Fancy HTML5 Tricks
• The Solar System, Rendered in CSS and HTML

Google’s Chrome browser has a well-established reputation for being not only extremely fast at rendering executing JavaScript, but also robust in its support of cutting-edge HTML5 technologies.

Both of these capabilities are on display at Chrome Experiments, a site that Google set up to showcase some of the coolest demos on the web for JavaScript apps, intricate CSS layouts and animations done with Canvas.

Chrome Experiments now has over 100 demos on offer, and we picked out some of our favorites for this little gallery.

Interest is exploding in HTML5 and its companion technologies. The hope is that these emerging standards will be widely used to power new web apps, as well as for playing animations, songs and videos in the browser without any plug-ins. Developers and content providers continue to rely on plug-ins like Flash or Silverlight for such multimedia playback tasks for now, but they are increasingly turning to HTML5, JavaScript and other web standards as browser makers continue to build the new capabilities into their latest releases.

We tested all of these experiments in multiple browsers, and almost all of them worked in Safari and Firefox, though they performed much better in the latest beta of Firefox 4 than in the current stable Firefox 3.x builds. Some of them also work splendidly in the latest Microsoft pre-release, Internet Explorer 9 preview 3.

Of course, a few of the Chrome demos on the Experiments site use Webkit-specific technologies and CSS prefixes, so those only work in Chrome and Safari. Some have poo-poohed vendor-specific prefixes, and others see them as a necessary step to force browser makers to adopt the latest behaviors being used in the wild. Regardless of that debate, it’s encouraging to see the different browsers all improving their JavaScript capabilities, which all of these demos exploit.

In short, you don’t need Chrome to view these, but they will all be more impressive in Chrome than in other browsers.

Browser Pong

Turn off your pop-up blocker and give this game a spin. It’s the console classic, Pong, but played with browser windows — talk about thinking outside the box. We also tried this one in Firefox 4 beta, and it runs great. It also seems a little easier to beat in Firefox than in Chrome for some reason. See more work from Stewart Smith at the Stewdio.

Destructive Video

This demo by Sean Christmann shows a short video. But when you click on it, the video breaks into tiny tiles that scatter across the screen. The video keeps playing inside the tiles as they tiles bounce around. After a few seconds, the tiles slide back into place so you can keep on clicking and blowing up the video to your destructive little heart’s content. This is the sort of canvas-based manipulation that HTML5′s native <video> tags allow. Canvas can do this sort of animation with other page elements, but it’s especially impressive to see with video. Sean explains how he does it on his own site. By the way, Firefox doesn’t like this demo very much.

Entanglement

Derek Detweiler’s simple solitaire game Entanglement is an addictive and fun time waster, but it’s also beautifully crafted. It uses subtle canvas animations to spin the hexagonal tiles, and JavaScript to handle the mouse and keyboard controls. Derek has a few other games on his personal site.

Ball Pool

This one will conjure memories of playing in the ball pit at the local IKEA. Ball Pool fills up a blank browser window with brightly colored balls. Drag them around, toss them and (this is extra cool) shake the browser to send them flying around. The demo uses box2d-js for all the physics. Ball Pool is one of the rare demos on Google’s site that works exceptionally well in Firefox 4.

The creator, Mr. Doob, is a busy man. Check out the lo-fi and psychedelic Plane Deformations, and the bizarre Multiuser Sketchpad, where you can watch dozens of anonymous wannabe Picassos use JavaScript to draw crude penises in your browser.

Canopy

Fun with fractals! Ryan Alexander’s experiment takes you inside a vector-graphics tree as it grows. The trees in Canopy can be zoomed in upon infinitely, and you can trigger mutations and blooming cycles, so you can watch leaves grow and fall off, and start new trees. The animation is slick and fast in Chrome, and it’s just as fast in our Firefox 4 beta. Be sure to check out Ryan’s massive JavaScript fractal zoomer on Google Code. And if you like watching computer-generated, canvas-animated trees and flowers bloom, check out PlasmaTree and FlowerPower, both from mhepekka at OpenRise.

Wavy Scrollbars

Click on the scrollbars to set them in movement. It’s called Wavy Scrollbars for a reason — the bars undulate like a desktop wave machine, smoothly growing and shrinking thanks to toxi’s verletphysics library. This one is by a Russian developer named Andrey. Check out some of his other JavaScript experiments at the389, his personal site.

Burn Canvas

The Burn Canvas experiment by Krzysztof Pasek utilizes the HTML5 canvas element to create a simple drawing app. The page will “burn” anywhere you point the mouse. If you leave it in one spot or move the mouse around slowly, the burn effect cycles through a series of bright, psychedelic colors. Things get even trippier when you hold down a mouse button, which causes the drawing to melt. Check out Pasek’s other experiments on his site, including a canvas-based Magic Eye 3D image generator. Packaged code for his various HTML5 experiments is available under the GPL free software license.

See Also:

• Conway’s Game of Life in HTML5
• Handy Guide to Detecting Support for HTML5
• Apple’s HTML5 Showcase Less About Web Standards, More About Apple

We’ve seen several implementations of Conway’s Game of Life that run in the browser — probably because Dr. Conway’s exercise in generative, automated systems is both simple enough for programmers to reproduce easily and pretty enough to watch that it quickly captures one’s imagination.

Here’s the latest: an HTML5 version of Life, as built by British programmer Joseph Mansfield. He says he tackled the “mini-project” to have fun with the HTML5 canvas element.

Here’s a primer on Life from Math.com. Visit Mansfield’s site and try out some different patterns and see what evolves. The screenshot above is about a dozen generations into a game that started with the word “Webmonkey” written on a 100×20 grid.

See Also:

• Conway’s Game of Life in JavaScript
• Smokescreen Project Promises ‘Flash Without the Plug-in’
• Handy Guide to Detecting Support for HTML5

Nothing fishy about IE9's hardware acceleration: This demo shows an animated fish tank rendered using Canvas.

Microsoft has released Internet Explorer 9 platform preview 3, the latest pre-release version of the company’s next web browser.

Curious developers running Windows can download platform preview 3 starting Wednesday afternoon. This version of IE9 features expanded support for specific HTML5 elements that can take advantage of the browser’s new hardware-acceleration abilities.

“Most computing tasks on the web only take up 10 percent of the PC’s capabilities,” Microsoft’s Ryan Gavin said at a press event Wednesday. “We want to unlock that other 90 percent.”

The new IE9 platform preview has expanded support for HTML5′s native video and audio capabilities, as well as expanded support for the Canvas element.

“Showing how well we handle these HTML5 elements is the point of this release,” says Microsoft’s Rob Mauceri.

Microsoft has taken a fair bit of heat in the browser world for being slow to adopt HTML5. Though not yet finalized, the emerging specification is already widely supported by Chrome, Firefox, Opera and Safari. Microsoft’s current version of Internet Explorer, IE8, is woefully behind these other browsers when it comes to support for HTML5 and other standards like CSS 3.

With IE9, due around the end of the year, the company hopes to get back on the right path.

Microsoft has engineered this version of the browser to take advantage of the latest multicore processors and GPU chips shipping in the newest hardware. Several of Microsoft’s hardware partners — AMD, Asus, NVidia and Dell — were on hand with their newest, fastest machines at the press event to show the browser preview running through some Microsoft-built demos.

The company first showed off a hardware-accelerated preview of IE9 at a developer event last year, and then upped those capabilities with the second platform preview in May. But Wednesday’s release of IE9 has some updated code to access the hardware and an updated JavaScript engine to make scripted animations smoother.

Microsoft’s hardware acceleration tools, which rely on Direct2D and DirectWrite, are built into Windows 7, and the company is making them available to Windows Vista users (but not XP).

The frame-per-second rates in the new IE9 preview release were impressive. We saw animations, as well as some native video playback (H.264 video — IE will support open source WebM video if the user has the correct codecs installed on Windows). From the looks of the demos, IE9 is shaping up to be one fast browser. It easily smoked Firefox and fared quite well against Chrome. Microsoft’s demos don’t contain any vendor-specific HTML code and they don’t block other browsers, so you can run your own tests in several different browsers. Microsoft is using vendor-specific prefixes on its CSS 3 demos, however.

It’s admirable that Internet Explorer is supporting so much of HTML5 in the next release (“We’re all in on HTML5,” Mauceri says) but Microsoft is taking their level of commitment up a whole extra notch by building a hardware-accelerated browser that can access the GPU for native animations and native media playback.

“Canvas, audio and video are the perfect match for hardware acceleration,” says Mauceri.

It’s a growing trend. Mozilla is adding hardware acceleration to Firefox 4, and Google is building it into Chrome.

Apple’s Safari browser already uses hardware acceleration for some animations, but Microsoft is confident the new IE9 still performs better. Earlier this month, Brandon LeBlanc from the IE team posted a video of Safari 5 and IE9 running side by side. The video shows IE outperforming Safari.

A bonus for designers — the new IE9 includes support for the new Web Open Font Format (WOFF) for displaying fancy fonts on webpages.

See Also:

• New IE9 Preview Features More Speed, Standards Support
• Microsoft to Double Down on HTML5 With Internet Explorer 9
• On Web Video Support, Safari Now Stands Alone