Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I have been doing research on HTML canvas libraries and I came across this question. What is the current state of the art in HTML canvas JavaScript libraries and frameworks? that was asked in 2010. The top answer was Fabric.js. After doing a bit more research I came across http://www.html5canvastutorials.com/ which features tutorials on KineticJs, that boasts having multiple canvases for speed. A bit more research later revealed that Canvas libraries seem to be all over the place when it comes to speed and features. What is the current state of JavaScript Canvas libraries and frameworks today? Has one come out on top?
EDIT: Since libraries are ever changing and a lot of people have recently been coming here for news and info on new libraries I changed the question to be more timeless.
Disclaimer: I'm the author of Fabric.js.
I would say that Easel.js, Fabric.js, and Paper.js are among the most used at the moment. I'm judging by the number of Github watchers for each repository, volume of discussion in their Google Groups, and how often I hear about them used as canvas libraries on Twitter.
These are also the ones with more or less decent documentation, examples/demos, discussion groups, and unit tests (the state of testing in most other canvas libraries is pretty sad).
I'm also maintaining this comparison table of various canvas libraries, where you can see how recently the library was updated, its size, support for IE<9 or node.js, and more.
EDIT: KineticJS is no longer being actively maintained.
Disclaimer: I created KineticJS
KineticJS is actually doing pretty well. You can find the source code at Github, where it is starred by 2180 people at the moment.
It can handle thousands of concurrent shapes:
10,000 drag and drop stress test: http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/
10,000 shapes with tooltips:
http://www.html5canvastutorials.com/labs/html5-canvas-10000-shape-stress-test-with-kineticjs/
It has very good event support, including mobile events, and it has a pretty solid suite of 100's of unit tests so the code base feels pretty solid.
kangax: P.S. awesome work with fabric.js! Other than KineticJS (of course), my other two favorite libraries are fabric and paper.
For recent readers, as of Jan 2013, I evaluated:
Kinetic
Fabric
Paper
Easel
By "evaluated", I did more than just read the docs; I created a prototype app.
I started with Fabric because it seemed to have the largest community and thought that it would be my solution. But, I gave up on Fabric for the following reasons:
weird and undocumented API inconsistencies that burned a lot of my time unnecessarily.
inconsistent pointer event support. Specifically, Fabric does not consider a "Path" to be a true shape object that is selectable and observable. This did not meet my needs since interactive Paths are a major requirement of my app.
behind the scenes additions of translations to the Canvas to position objects. For me, Fabric tries to be too clever in this regard without being clear to the developer what it's doing.
overly strong opinion on how move, resize and rotate interactivity works. In many ways, it's great to have this functionality built into the framework but, in my case, I didn't agree with the way it was implemented which meant essentially having to reimplement it myself anyway.
sparse documentation - lot's of those cases where the documentation of a method is of the form: "setX(Y) - set's the X to Y" :-)
I took a look at Paper and didn't get too far. It seemed overly obtuse to me and also falls between too stools IMO - it's too much of a visualization library to be a simple object model for Canvas but it's not enough of a visualization library to compete with D3. Plus, the documentation again was not particularly accessible.
I think Easel probably makes a lot of sense if you have a Flash/ActionScript background but I do not. Plus, it seemed overly game-focused for my requirements. The nail in the coffin was again documentation - not enough and presented in non-standard format.
So, I ended up going with Kinetic because:
really rich and clear tutorials and examples
API functions do what they're called and are largely guessable - faster productivity, shallower learning curve
is reasonably clear about what it does do and what it doesn't - it's not as rich as some of the others but that's a benefit; it does fewer things but does them better
Paths are first-class citizen Shapes, like any other Shape, which was essential for my requirements.
Kinetic is not perfect by any means and there have been a few times when I've had to dive deep into the source code to work out what's actually going on under the covers. Plus, I miss the SVG parsing and output of Fabric.
I would highly recommend pixijs. Its a high performance canvas library.
Pixi.js is a 2D webGL renderer with a seamless canvas fallback that enables it to work across all modern browsers both desktop and mobile.
http://www.goodboydigital.com/pixi-js-is-out/
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am trying to draw some vector graphics and I found two ways:
(I have to mention that I use electron width nodejs and therefore the language is javascript and instead of OpenGL there is WebGL.)
Triangulate the shapes and draw it with WebGL. I think this is a fast method. But my concern is when you are moving single points, the shape has to retriangulated. And I don't know how fast this can be done.
Calcualate on a per pixel basis with inside/outside equations on the CPU. But after every resizing or moving the changed pixels has to be recalculated.
Can somebody give me any hints or some experience someone already has made?
Also how are Illustrator, Inkscape, etc. rendering their graphics?
Thank you
There is several ways to draw vector graphics on Web Platform.
Frist one, as mentioned in comments, SVG. It's perfectly fine if your graphics are mainly static or aren't extensively updated. For example, our Maps API uses SVG in some cases and it's sufficiently performant. And it's substantially easier to use that other options.
The second one is, of course, Canvas2D API. For the most, it's just an API to browsers painting backend (e.g., Skia for Chrome). The very same backend is used for everything else: HTML, SVG, sometimes even GUI. However, it gives our a bit more control over the rendering. And if your scene is heavily animated and/or needs to be highly interactive, there's good chance you'll be able to make a much more performant rendering that SVG. That's due to ability to make lightweight, highly specialised and thus faster renderer. But there're some catches. Most important would be necessity to implement your own hit test to provide some interactivity for your scene (SVG provider an event model).
If even Canvas2D isn't enough for you, there's a third way and it's WebGL. If used right it should be the most performant one. It provides you most control over resources and rendering itself and it's almost always fully hardware accelerated. But achieving that performance may be a challenge. But there're libraries out there which provides Canvas2D-like API, but powered by WebGL, for example Pixi.js.
About the last part of your question. I don't know about Adobe Illustrator, but Inkscape uses Cairo, as, actually, many applications, including Mozilla Firefox. In its turn Cairo can use one of multiple crossplatform or platform specific backends.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I'm attempting to build a tile-based game in JavaScript, using HTML5 canvas. There are many engines to choose from, such as
JawsJS
GameJS
Cocos2D
MelonJS
CraftyJS
ImpactJS (commercial)
... and the list goes on and on.
However, there does not seem to be one de facto standard among all these different implementations. Essentially I am looking for the jQuery of JavaScript game engines. One that is backed by a (larger) community, has excellent documentation and is actively maintained. Most of these just seem like one-man projects to me.
What is the de facto standard for 2D game engines in JavaScript?
Additionally, I would be very interested in experiences with actual implementations (other than demo Pong and Pac-Man games).
There isn't one right now and I would go on to say that there may never be one in the same way that there is jQuery, for the simple fact that most (commercial) games are going to want to be mercilessly performant, which means using as little extra cruft as possible, and many of these libraries add unnecessary things or performance hits where it may not be desired.
That is not to say they won't be used at all. All of the above libraries are probably good for a great deal of small(er) games.
But I imagine on large projects many studios will find themselves starting with a library until they hit a performance wall, and then writing all the components they used in the library themselves in order to keep only the thin bits that they need.
If there is one that becomes popular it will almost certainly be be modular like MooTools (the second most popular JavaScript library), where it tries to be compact and lets you select only the components you want to use. I imagine you'll find a lot of games in the future that have a very small engine just for handling sound or just for handling images or a 2D isomorphic board, instead of games that have a (large) library that attempts to handle every possible kind of 2D game.
Anyway, if you simply want to find the most popular JavaScript engine then your best bet over the coming months is to use Google (page rank) to determine most popular. Searching for "2D game engines JavaScript/Canvas" will give you a pretty good idea of which is the most linked-to (popular) library at any given time.
(After all, try searching Google for "JavaScript library". You can guess the first result I bet!)
I found this question while searching for an engine of my own. I just want to add this site here because it offers a good overview over a lot of HTML5 game engines:
http://html5gameengine.com/
There are also some nice filters like licenses/costs, release date and user rating.
(PS: I'm not related to this site in any way)
I agree with the others. There just isn't a standard, and there might not be for a while. Yet, I'm just starting out myself - and really digging the ThreeJS framework:
http://learningthreejs.com/
https://github.com/mrdoob/three.js/
Sure, it's a WebGL 3D framework - but I suspect you can strip out the 3D elements to make it 2D. At least that's my hope as I dig into this world of WebGL - which could end up being the standard moving forward?*
What helps is relying on Chrome Canary for development! :) https://tools.google.com/dlpage/chromesxs
If you're going this route - don't forget to set about:flags in Chrome, to enable "Override software rendering list" flag.
Backbone Game Engine is a 2D framework that was written on top of the already popular and large community driven Backbone.
Objects, inheritance, events, persistence and so forth come de facto with Backbone. The engine borrows from MelonJS with sprites (Backbone Models) that implement update and draw methods. Super Mario Bros. Level 1-1 was written as an example. It may be worth your time checking.
Use gameQuery, a JavaScript game engine for jQuery.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
The community reviewed whether to reopen this question last year and left it closed:
Original close reason(s) were not resolved
Improve this question
This question is looking for a practical and easy way for drawing multigraphs using Javascript.
First of all look at this question. None of those libraries support Multigraphs (or Pseudographs ). I mean I can't generate graphs like this:
Is there any jQuery plugin (or javascript library) out there for this purpose ?
I thought i can use WolframAlpha's API and use its images, something like this:
but it have lots of problem:
I can't move nodes or add remove edges interactively.
Only 2000 API calls per month. Not enough.
I can't produce large or intermediate graphs.
They are really ugly!
Please help me if you know some javascript library in order to draw Multigraphs, or anyway to produce such graphs (something like Dracula Graph Library but with ability to draw Multigraphs).
Cytoscape.JS supports multigraphs, is pure Javascript, and uses the new HTML 5 Canvas for performance. Its design intent is general purpose graph visualization/manipulation.
https://js.cytoscape.org/
If you are allowed to use Google Charts API you may refer to this
http://code.google.com/apis/chart/image/docs/gallery/graphviz.html
Example:
https://chart.googleapis.com/chart?cht=gv&chl=graph{C_0--H_0[type=s];C_0--H_1[type=s];C_0--H_2[type=s];C_0--C_1[type=s];C_1--H_3[type=s];C_1--H_4[type=s];C_1--H_5[type=s]}
I'm affraid you will have to do some development yourself. Raphael.js is pretty capable in creating and manipulating svg - would be good starting point
Some of those graph visualization libraries (mentioned in this question) DO support Multigraphs and allow dragging/placement of nodes
jsplumb: http://jsplumb.org/jquery/stateMachineDemo.html
possibly http://js-graph-it.sourceforge.net/ may support multigraphs.
but as far as your issue
4- Its really ugly!
These may not appeal to your aesthetic.
I think paper.js (http://paperjs.org) will get you also pretty close.
You might want to check this one out: www.d3js.org
You'd have to do a lot yourself (make your own SVG and such), but the library is very powerful.
I recently used Graphviz to draw the connections between some authors pubblications.
Graphviz is open source graph visualization software. The Graphviz layout programs take descriptions of graphs in a simple text language, and make diagrams in useful formats, such as images and SVG for web pages, PDF or Postscript for inclusion in other documents; or display in an interactive graph browser.
For example i used a simple DOT file to write all the connection between the authors and I produced a PNG file.
http://www.graphviz.org/
Here there is all the documentation that you need and in the gallery section you can see a lot of output example.
Hoping it could be helpful.
In a commercial scenario, take a look at yFiles for HTML:
It easily supports multi-graphs and does not look too ugly, I believe:
(These graphs have been laid out automatically, manual placement is also possible.)
Of course this is a matter of taste, so if you don't like the look, you can change any aspect of the visualization, like in the style tutorial.
The API offers full interactive editing capabilities and being a pure client-side solution, of course there is no API call count limit.
Large graphs are still a problem with todays' Javascript engines, but only if "large" means more than thousands of elements. With virtualization (considering only what is currently visible in the viewport during rendering), you can get good performance with thousands of elements.
Disclaimer: I work for the company that creates the library, on SO/SE, however I do not represent my employer. My posts and comments are my own.
You can check jsnetworkx (http://jsnetworkx.org/)
It is a js version of python graph library which supports multi-graph. It has a draw function which visualizes the graph using D3.js. It is available for both browser and node.js.
Best bet would be to render them on the server (or use it as an applet) with JGraphT.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I'm looking for javascript libraries that helps with HTML5 development.
Please only post one library per answer, and don't forget to describe it.
Modernizr is the best way to detect which HTML5 features a browser supports.
"Processing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets. Processing.js uses Javascript to draw shapes and manipulate images on the HTML5 Canvas element. The code is light-weight, simple to learn and makes an ideal tool for visualizing data, creating user-interfaces and developing web-based games."
Raphaël — Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.
I'll post about Easel.js and it's sibils hoho. They're from the same developer GSkinner I post all related libraries because of this. I've just used Easel a little, but the others seem promising. I post the URL and their description:
Easel.js
The new Canvas element in HTML5 is powerful, but it can be difficult to work with. It has no internal concept of discrete display elements, so you are required to manage updates manually. The Easel Javascript library provides a retained graphics mode for canvas including a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier.
It supports TweenJS
TweenJS provides an extremely simple API for creating complex sequenced animations in Javascript. It includes basic (experimental) support for working with style sheets.
Also supports SoundJS
Audio in HTML is promising, but can be quite difficult to work with. Each browser has a similar but different approach, which requires a lot of guess and test, and edge cases, which can add up to a lot of time spent. The SoundJS JavaScript library provides a simple API, and some powerful features to make working with audio a breeze.
And Zoë
Zoë (from Zoetrope) is an open source application for OSX or Windows which provides an easy way to export Flash animations as sprite sheets for use with EaselJS and HTML5.
Simply drag a SWF file onto the application. It will scan the main timeline to find frame labels and dimensions. You can tweak the frame bounds, edit settings, then export a sprite sheet image and EaselJS code defining a SpriteSheet instance with frame data based on the timeline labels.
SWFs should have all animation on the main timeline, with frame labels to indicate the start of animations. Nested graphics are fine.
I haven't used them all but seem quite interesting =)
html5sql is a light JavaScript module that makes working with the HTML5 Web Database a whole lot easier. Its primary function is to provides a structure for the sequential processing of SQL statements within a single transaction.
The only one I have found is html5widgets.
I would have assumed that there where several competing libraries for this.
But it does implement most of the new html 5 form goodness, which is what I care about...
Check out RGraph.
Available at http://www.rgraph.net/
Complete set of graphs for html5.
Free for non-commercial use, else it is 49 Pounds (English)
I use Perkins HTML5+CSS3 framework "He" describes himself as following:
I am a Framework thought to make the life of designers and developers a bit easier. I use the latest Web standards, also known as HTML5 and CSS3. To take more advantage and allow you not to repeat yourself, I am based in LESS.js, which means that you can forget some of the proprietary browser prefixes. Also, I carry a number of preloaded basic styles, mixins, helpers, transparent textures and a #font-face driven icon set. If HTML is your passion, I can help you to make wireframes quickly using the dynamic grid, based in Tyler Tate's 1kb CSS Grid which is already included and can be configured in the perkins.config.less file, as well as many other options.
CreateJS is a good collection of HTML5 library.
http://www.createjs.com
While more than a javascript library HTML5 Boilerplate looks really usefull.
"HTML5 Boilerplate is the professional badass's base HTML/CSS/JS template for a fast, robust and future-proof site."
ExplorerCanvas — Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. To use, web developers only need to include a single script tag in their existing web pages.
RoCanvas.js
Creates interactive drawing board that lets users draw on your site (can be useful for avatars, or much better for colaborative projects, learning etc
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
First a little intro:
Last year i wrote this http://dragan.yourtree.org/code/canvas-3d-graph/
Now, i want to make complete rewrite of it, because that old version have some limitations, for example: sometimes it happens that bars are not visible, because they are drawn one behind another.
In this old version there is no real 3d, just bunck of 2D lines, which emulate 3D.
Now, what i want is to go to full blown 3D scene, i want to keep all the objects in memory, and add some kind of 3D navigation buttons that will enable users to rotate whole scene on all 3 axis, and zoom camera in and out.
I've already decided that i will use http://sylvester.jcoglan.com/ for vector/matrix stuff, but i'm still unable to find good tutorial for 3D. There are tons of texts on the Internet, most of them date from the 90s, an are incomplete or written really bad.
So, my question is: what is the best online resource/tutorial that will enable me to write my own JS 3D engine from scratch.
It should cover all relevant topics:
vectors
matrices
objects
camera
scene rendering
lighting
rotating objects on scene
moving the camera
etc..
(i'm fairly familiar with first two)
Thank you for your time.
If this is specifically for a JavaScript related project then I understand but if you are simply doing this to grasp the basics of 3d rendering there might be more mature platforms out there for you.
In any case..
Links that might be useful to your learning:
Prototyping A Simple 3d Renderer In JavaScript
3D Basics - A Primer
The JavaScript Raytracer
JavaScript 3D Renderer
Also, some fun JavaScript 3d examples:
Rotating 3D Cube in JavaScript
Wolfenstein 3D in JavaScript
Anything else in this SO Question: Stunning graphic effects with JavaScript?
Just a couple of suggestions, but probably not exactly what you're looking for:
I suggest that you take a look at Jacob Seidelin's canvas examples at nihilogic.dk : http://blog.nihilogic.dk/search/label/canvas .
If you're willing to abandon canvas and go with an existing flash library, take a look at Sandy3D : http://www.flashsandy.org/demos .
Perspective projection:
http://www.cse.unr.edu/~bebis/CS791E/Notes/PerspectiveProjection.pdf
http://www.gamedev.net/
It's been quite a while since last time I tried to do anything with graphics/games/3D, but I do remember this website as one of the most widely known resource.
http://www.gamedev.net/reference/
Of course, it's very general purpose, and covers more things than you're asking for, but it contains good stuff on the Math and Physics stuff.
The sad truth is that there is still no real support for 3D graphics in JavaScript.
So anything you do will have to involve completely implementing a 3D renderer (or use one someone else already implemented)
Since these things are usually implemented in hardware and you are writing JavaScript it is naturally going to be very slow for anything more than trivial scenes.
You will be better served by languages like Java, C# or C++ for your 3D graphics.
There is a technology called "Canvas 3D" available for Firefox.
There is also an utility called C3DL, which makes it easier to use this technology.
Unfortunately, as far as I know, there is no Opera/Internet Explorer/WebKit equivalent - this addon is only available for Firefox 3(Firefox 2 and Firefox 3.1 beta are not supported)...