All posts tagged ‘canvas’

File Under: HTML5, JavaScript, Programming

Tips and Tricks for Better HTML5 Canvas Animations

HTML5If the latest flashy HTML5 experiments have you fired up to experiment with HTML5′s canvas element yourself, one seasoned developer has some advice for newcomers — particularly those coming from Flash backgrounds.

Hakim El Hattab, whose experiments with HTML5 were featured in our round up here on Webmonkey earlier this week, has a short, instructional write up on the Canvas tag that includes some tricks to make your JavaScript experiments run smoother and faster.

Perhaps the most useful tidbit in the article is that “bitmap operations are very processing expensive,” and whenever possible you should reduce and reuse as many pixels as you can between frames. While browsers are getting faster, optimization will always be key (the same is true of Flash animations).

Another thing Hakim recommends you keep in mind if you’re coming from a Flash background is that, “unlike the Flash Player’s redraw regions, this management of ‘dirty rectangles’ needs to be done manually for canvas.” Think of it as garbage collection — like C or C++, you’re in charge of cleaning up after your code when it comes to redrawing in Canvas.

Along the same lines is his tip for clearing your canvas: just reset the width and height. This is also good know if you want to avoid clearing your canvas.

The advice is good for those who have some experience drawing with JavaScript in canvas tags, but if you’re totally new to the animation possibilities in HTML5, we’d recommend starting with Mark Pilgrim’s online book Dive into HTML5, which has an entire section devoted to Canvas. Once you’ve mastered the basics, this handy HTML5 Canvas cheat sheet is good to keep on hand for looking up the various methods and attributes available.

See also:

File Under: HTML5

Play Pac-Man in HTML5

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:

File Under: HTML5, Web Standards

Chrome Shows Off Some Fancy HTML5 Tricks

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.

Continue Reading “Chrome Shows Off Some Fancy HTML5 Tricks” »

File Under: HTML5

Conway’s Game of Life in HTML5

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:

File Under: Browsers, HTML5

New Hardware-Accelerated IE9 Preview Arrives

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.
Continue Reading “New Hardware-Accelerated IE9 Preview Arrives” »