All posts tagged ‘canvas’

File Under: APIs, HTML5, JavaScript

Easel JS Simplifies Working With HTML5 Canvas

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:

File Under: HTML5, Software

Export Adobe Illustrator Drawings and Animations to HTML5

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:

File Under: CSS, HTML5, JavaScript, Web Apps

Chat With Other Tadpoles in Rumpetroll

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:

File Under: HTML5, Web Standards

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:

File Under: HTML5, JavaScript

Write Your Name in Bouncy Google Balls

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!