Posted on by & filed under Content - Highlights and Reviews.

Here’s little HTML5 game I made using the <canvas> tag. You can play it yourself at

There are 50 fish here being rendered using HTML5 canvas paths and shapes. In desktop browsers this game has a solid framerate of around 60 FPS, but when you try to play on a mobile phone your framerate drop to below 10 FPS.

What’s the problem?

In this fish game each type of “actor” on the screen has its own class. The Sea, Shark and Fish classes each have a draw() method that uses canvas drawing methods to build our characters from simple shapes. Using the Chrome Profiler we can see that the game spends most of its time in the draw() method for the Fish class.

CSS3 Transforms to the rescue

Obviously we need to figure out how to spend less time drawing fish. Animating with canvas means we have to clear the screen and re-draw each item multiple times per second. This is why our game is slowing down. Using CSS3 there is a way that we can draw each fish only once. Doing so will make our game a lot faster.

Here is the approach:

  1. Create a seperate <canvas> element for the sea, the shark, and each fish.
  2. Use the old draw() method only once on each instance to render it initially to its own canvas.
  3. Instead of calling the draw() method over and over again, we’ll call a new drawEl() method that will apply a hardware-accelerated 3D transform to update the position of each fish.

Those simple steps should be enough to get us moving in the right direction. This is the main change that will be needed for us to use CSS3 instead of canvas for the animation.

Faster Fish!

Making that and a few other changes we are able to more than double the frame-rate of our little game on Mobile Safari. Not a bad accomplishment for such a short amount of work.

Using canvas to draw your graphics doesn’t mean you can’t take advantage of CSS3 to spped up your animations. Combining this technique with other canvas best practices you can make some cool games for the mobile web.


There are some great resources out there for learning more about <canvas> performance. Here are a few that I found helpful:


Safari Books Online has the content you need

Check out these HTML5 books available from Safari Books Online:

You’ll learn how to build interactive multimedia applications with HTML5 Canvas, using this new element to draw, animate, compose images, and more. You’ll also learn the best way to use existing JavaScript libraries, as well as how to incorporate related aspects such as audio and video.About this author

HTML5 Games Most Wanted: Build the Best HTML5 Games gathers the top HTML5 games developers and reveals the passion they all share for creating and coding great games. You’ll learn programming tips, tricks, and optimization techniques alongside real-world code examples that you can use in your own projects. You won’t just make games—you’ll make great games.
Foundation HTML5 Canvas: For Games and Entertainment teaches you how to make exciting interactive games and applications using HTML5 canvas. Canvas lets you produce graphics, animations, and applications using the HTML5 and JavaScript web standards. It allows you to draw directly within the browser without the need for third-party plugins like Adobe Flash, and so canvas works perfectly across desktop and mobile devices, like the iPhone and Android.
HTML5 Games Development by Example will show you how to use latest HTML5 and CSS3 web standards to build card games, drawing games, physics games and even multiplayer games over the network. With the book you will build 6 example games with clear step-by-step tutorials.
Jamund Ferguson is a UI Product Architect at oDesk where he helps other people find the joy of working from home. He’s a passionate advocate for mobile web and an enthusiastic node.js hacker. He works from his home outside of Salt Lake City where he lives with his wife and two kids. You can find him on Twitter at @xjamundx.


One Response to “Faster Mobile Gaming With CSS3”