Here’s a quick primer on Pixi.js:
It’s really comfortable for Flash/Actionscript developers. The folks who created Pixi.js are clearly very familiar with Flash and used a lot of Flash terminology in Pixi.js. It also feels like they worked hard to make it very easy to dig in and start creating cool stuff with minimal boilerplate code. I really appreciate that.
Pixi.js has a really clever renderer: It detects if your browser is WebGL enabled. If not, it falls back to an HTML5 canvas renderer. Not only is it cool that it handles this for you, but browsers with WebGL (Chrome, Safari) are hardware accelerated. This means that they can unload the rendering from the CPU to the GPU, making everything run much faster. Firefox also supposedly has WebGL capability, but from what I’ve read, the performance is questionable. The WebGL thing is going to be a big deal as it becomes more widespread. As usual, IE10 doesn’t support it, but it does have hardware accelerated canvas.
As a side note, the hardware acceleration is all based on your browser and hardware configuration. So, if you have a relatively new device and an updated browser, it just kicks in automatically. iPhones and iPads all support hardware acceleration and many Android devices do too. Obviously, how you handle older browsers is the challenge. In most cases, a less full-featured backup may need to be served up. In a few cases, the user may need to have hardware acceleration to run your game or app at a reasonable frame rate. A smart way to handle this is to check the frame rate of the game and alert a user if it drops below a minimum threshold.
So grab the Pixi.js code and start building some HTML5 goodness.