Overview of recent JS Graphical Libraries, based on HTML5 Canvas or SVG, such as KineticJs and Three.JS

1. JAVASCRIPT GRAPHIC LIBRARIES
ALENA KALTUNEVICH 10/11/2013
1

2. Summary
Introduction
Most Popular JS graphic libraries
HTML5 canvas element
KineticJs
Three.JS
External links
2

3. Introduction
JavaScript graphic libraries are free, easy to use and are based on html5
canvas element or svg technology.
They provide easy and efficient tool for creating:
2d elements: lines, curves, shapes
3d content: polygons , perspective
Styling: shades, filters
Graphs and charts,
Drag and drop interactive elements,
Animations without using Flash technology
http://www.html5canvastutorials.com/labs/html5-canvas-ultimate-flash-
killer/
3

4. Most popular JS graphic libraries
D3.js
Powerful library for manipulating data based documents, allows to bind arbitrary data to
DOM and create original effects to visualize them.
Does not support well IE earlier versions.
http://bl.ocks.org/mbostock/3943967
http://mbostock.github.io/d3/tutorial/circle.html
Processing.js
The code is written using Processing language and then it is included in HTML page, good
for creating interactive graphic elements.
http://mariuswatz.com/works/abstract01js/index_auto.html
Raphael
Draws graphics for web sites using SVG for most browsers, VML for older versions of IE.
http://raphaeljs.com/curver.html
http://raphaeljs.com/polar-clock.html 4

5. Most popular JS graphic libraries
KinetcJs
Used for rendering 2d content such as curves, lines , shapes in static or animated way
http://www.html5canvastutorials.com/labs/html5-canvas-wheel-of-fortune/
Three.js
Used for rendering 3d content
http://blackjk3.github.io/threefab/
BonsaiJS
Used for creating svg based graphics
http://demos.bonsaijs.org/demos/rainbow/index.html
5

6. HTML5 Canvas element
Tag similar to any other html tag
The contents of the tag is rendered with JavaScript
Context is an object used to render graphics inside the canvas element
The context can be 2d or webgl (3d)
6

7. HTML5 Canvas element
Within canvas element you can draw lines, curves, polygons
Line Quadratic curve
Polygon
7

8. http://www.html5canvastutorials.com/labs/html5-canvas-elastic-stars-with-kineticjs/
http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-brighten-or-
darken-image-tutorial/
KineticJs offers the possibility to use build-in 2d elements such as cercles, rectangles,
and other shapes .
You can make these elements draggable, place them on different layers, apply
transformation and styling features like scaling, shadowing etc.
When you are working with images, filters are available for inverting colors,
grayscaling and other similar effects.
8

9. Multiple possibilities exist for animating elements:
you can apply linear movement, oscillation movement, random direction
movement, rotation based on mathematical formulas :
http://www.html5canvastutorials.com/kineticjs/html5-
canvas-all-easing-functions-with-kineticjs/
http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-
animate-position-tutorial/
You have the possibility to make elements move only within the boundaries of
delimited area :
http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-shapes-
horizontally-or-vertically-tutorial/
9

10. Three.js
Three.js is used to render 3d content with renderer object
var renderer = new THREE.WebGLRenderer();
3d objects are represented by meshes
var plane = new THREE.Mesh(new THREE.PlaneGeometry(300, 300)
Then Meshes are added to the scene
scene.add(plane);
Scene is then rendered with camera, orthographic and perspective
var camera = new THREE.PerspectiveCamera(45,
window.innerWidth / window.innerHeight, 1, 1000);
http://www.html5canvastutorials.com/three/html5-canvas-webgl-plane-with-three-js/
10

11. Three.js
Different lights are available such as spot light, point light, ambient light etc
You apply different textures and materials to the meshes
var material = new THREE.MeshPhongMaterial({color: 0xe4e4e4});
Very impressive results can be achieved when rendering complex shape object
modeled with a 3d modeling program such as Blender.
You can also give to the user the possibility to interact with the scene and modify
dynamically the content of the scene.
http://threejs.org/examples/webgl_materials_cubemap_balls_reflection.html
http://carvisualizer.plus360degrees.com/threejs/
11

12. External links
http://bonsaijs.org/
http://raphaeljs.com/
http://mrdoob.github.io/three.js/
http://d3js.org/
http://kineticjs.com/
http://processingjs.org/
http://www.html5canvastutorials.com/
12

13. Find out more
• On https://techblog.betclicgroup.com/

14. About Betclic
• Betclic Everest Group, one of the world leaders in online gaming, has a unique portfolio
comprising various complementary international brands: Betclic, Everest Gaming, bet-at-
home.com, Expekt…
• Active in 100 countries with more than 12 million customers worldwide, the Group is
committed to promoting secure and responsible gaming and is a member of several
international professional associations including the EGBA (European Gaming and Betting
Association) and the ESSA (European Sports Security Association).
• Through our brands, Betclic Everest Group places expertise, technological know-how and
security at the heart of our strategy to deliver an on-line gaming offer attuned to the passion
of our players.