CODEWITHSUNDEEP
htmlhtml5-canvaskineticjsfabricjseaseljs
ppoliani
ppoliani

Reputation: 4906

Canvas frameworks performance

I want to choose a canvas framework for a project that I'm about to start. Hence, I started a research to find the one that would suit my needs. While searching for the pros and cons of various libraries, I stumbled across this performance test (http://jsdo.it/djankey/test-kineticjs).

I was really impressed by how differently those three libraries perform. so i would like to ask if that test reflects the actual performance that Kinetic.js, Fabric.js and Easel.js exhibit.

It seems that the former two are very slow (at least on my computer).

Upvotes: 3

Views: 2494

Answers (2)

cyberpantz
cyberpantz

Reputation: 495

It depends on what type of project you are building. As olsn mentioned above, if you are familiar with ActionScript and/or you are building a game with lots of moving sprites need CPU performance, then Easel.js would definitely be your best choice out of the three frameworks you mentioned. Easel is also a wise choice if you want to integrate with the other libraries in the CreateJS suite.

If you are building a game and don't mind dropping some money on a supported solution, you might want to investigate impactjs - I haven't used it personally, but I've heard good things from developer friends of mine.

You can build simple applications in Kinetic very quickly - it's API is very simple and straightforward, but if performance is key - then I'd probably shy away from it.

If you need lots of interactivity, and want a library that makes it easy for users to manipulate objects on screen - then fabricjs is a great tool out of the box and has lots of built-in functionality that make developing such an app go quickly, and it's performance is relatively good as well.

Upvotes: 1

Olaf Horstmann
Olaf Horstmann

Reputation: 16892

On my System fabric.js is pretty fast as well, however it didn't interact with my mouse. I'm developing with EaselJS and I'm very happy with it, for the main reason that its API is very close to AS3 - so if you have developed with Flash before, you might want to consider it.

On the other hand it might be possible that any of those frameworks suit your needs performance-wise. I'm guessing your project will not be a simple 300x300 box with 1000 dots, and i'd say anything up to 100 sprites should be handled pretty good by any of those frameworks. It gets interesting when your canvas is getting bigger(fullscreen e.g.) because then then the rendering relies more on hardware and browser-native rendering operations than canvas-frameworks. And afaik all those framework rerender the complete canvas on a "tick" (but I'm not 100% sure about that).

Upvotes: 2

Related Questions