Jump to content

Recommended Posts

Hello everyone,

I'm a French Student in an Engineering school and i need to find the best way to do some animation in HTML5.
It seems there's three principal tools : Canvas, SVG and WebGL.
According to my recent research, Canvas is more for dynamic animation, if i need to refresh a lot of sprites, etc etc... ,SVG more for graphics, charts and pre-programmed animations and WebGL for 3D.
(Tell me if i'm wrong, because i feel like Canvas and SVG can do SAME, i can't see a real difference except about performance)

I saw there's a lot of library for Canvas(Pixi.js, Fabric.js, Easel.js...).
But what's the "real" difference between them ? Is there a benchmark for that ? Is there a list of features of Pixi.js for example ?
I search something concrete to compare theses libraries.

If someone could answer that :)
Sorry for my English,


Link to comment
Share on other sites

If you need smooth lines and stuff, use SVG/canvas. If you need performance, 10.000 particles, or Meshes, or Shader stuff, then WebGL is your choice.

PIXI provides API that has both canvas and WebGL implementations. That way you dont have to operate with low-level stuff, and at the same time you can enable optimizations that work for webgl. If you want to use smooth primitives with PIXI - just wrap your own Canvas2d into PIXI.BaseTexture and update it regularly.

I dont think that SVG or canvas2d libs will help you to render 100k bunnies : http://www.goodboydigital.com/pixi-js-v4-batching/

PIXI examples: http://pixijs.github.io/examples/

PIXI plugins:

0) SPINE!!! The best skeleton animation editor in the world: https://github.com/pixijs/pixi-spine

1) particles (https://github.com/pixijs/pixi-particles)

2) tilemaps (https://github.com/pixijs/pixi-tilemap)

3) extra filters (https://github.com/pixijs/pixi-extra-filters)

4) compressed-textures (https://github.com/pixijs/pixi-compressed-textures)

5) 3d support (http://gameofbombs.github.io/pixi-bin/index.html?s=flip&f=cards.js&title=Cards , https://github.com/gameofbombs/pixi.js)

One of the best PIXI games: http://www.celsiusheroes.com/

One of game constructors that uses PIXI: http://www.rpgmakerweb.com/

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...