Lecture for Binary Studio Academy PRO course about HTML5 API by Bohdan Rusinka (JS developer at Binary Studio) binary-studio.com

1. HTML5 API
graphics
binary-studio.com

2. Plan
❖Canvas
❖SVG
❖WebGL

3. Canvas

4. What is canva? z?
"Added in HTML5, the HTML <canvas> element
can be used to draw graphics via scripting in
JavaScript. For example, it can be used to draw
graphs, make photo compositions, create
animations, or even do real-time video processing
or rendering.”
<canvas></canvas>

5. Coord system

6. Let’s look at example...
http://codepen.io/anon/pen/grWvmv

7. Canvas can be used in
Gaming
Advertising
Data Representation.
Education and Training.
Art and Decoration..

8. Wikipedia
гласит:

9. Why canvas?
Unlike SVG is much more convenient to deal with a large number of elements;
It has hardware acceleration
You can manipulate each pixel
You can apply image processing filters
There are a lot of libraries

10. Why not?
Loading the CPU and RAM;
Due to the limitations of the garbage collector, there is no way to clear the memory;
It is necessary to handle events with objects
Poor performance at high resolution
We have to draw in each element separately

11. Canvas context
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

12. Default properties
❖Size - 300x150
❖id
❖Checking for availability

13. Cute example
http://codepen.io/anon/pen/GZmozE

14. Reality and expectations
http://image.shutterstock.com/z/stock-vector-animal-
portrait-with-flat-design-dog-german-shepherd-vector-
illustration-188712326.jpg
http://codepen.io/anon/pen/EKWZyQ

15. More Canvas examples
http://corehtml5canvas.com/code-live/

16. Canvas libs
KineticJS
Paper.js
EaselJS
Fabric.js
oCanvas
jCanvas

17. jCanvas example!
http://codepen.io/SitePoint/pen/OMZNQx

18. Sites
http://wineexplorer.brancottestate.com/attribute/varietal
https://www.google.com.ua/maps/

19. Lazy? Solution crazy!
http://blog.mikeswanson.com/ai2canvas

23. SVG

24. SVG? (Schtirlitz V Gorode)
SVG is a language for describing two-dimensional graphics.
As a standalone format or when mixed with other XML, it
uses the XML syntax [XML10]. When mixed with HTML5, it
uses the HTML5 syntax [HTML]. …
SVG drawings can be interactive and dynamic. Animations
can be defined and triggered either declaratively (i.e., by
embedding SVG animation elements in SVG content) or via
scripting.

25. Coordinate system

26. Viewbox
<svg width="800" height="600" viewbox="0 0 400 300">
<!-- SVG content drawn onto the SVG canvas -->
</svg>

27. https://sarasoueidan.com/demos/interactive-svg-
coordinate-system/index.html

28. SVG
Any size - same quality
Search engine bots
Independence from JavaScript

30. SVG cons
Big file size.
Maps - small elements require reading whole doc.
Less details - more size

31. Let’s look
http://codepen.io/anon/pen/vGmdwj

32. Path
<path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>
The path will move to point (10,10) and then move horizontally 80 points to the right, then 80 points
down, then 80 points to the left, and then back to the start.
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

34. SVG statistics
http://w3techs.com/technologies/details/im-svg/all/all

35. SVG vs Icon Font
https://github.com/blog/2112-delivering-octicons-with-svg

36. Libs
http://gojs.net/latest/index.html?gclid=Cj0KEQjw2sO3BRD49-
zdzfb8iLwBEiQAFZgZfFNqJ57UgHyo2agqHIVUOyD4YooXa3FAli_VPNGNPXMaAp
ZT8P8HAQ
https://bonsaijs.org/
http://processingjs.org/
http://fabricjs.com/
https://d3js.org/
http://snapsvg.io/

37. D3
// Update…
var p = d3.select("body").selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.text(function(d) { return d; });
// Enter…
p.enter().append("p")
.text(function(d) { return d; });
// Exit…
p.exit().remove();

38. Play
http://sheav.se/en

45. Fight baby, fight!
http://codepen.io/chris-creditdesign/details/BIADJ

46. So?

47. WebGL

48. What the heck is WebGL??
WebGL allows web content to use the API, based on OpenGL ES 2.0, for rendering three-dimensional
graphics without the use of plug-ins in the HTML canvas element in browsers that implement
support for it. WebGL programs consist of control code written in JavaScript code and special effects
(shader code) that runs on the GPU. WebGL elements can be mixed with other HTML elements, and
assembled with other parts of a web page or a web page background.

49. WebGL is context
var gl;
try {
gl = canvas.getContext("experimental-webgl");
} catch(e) {}

50. Uses
GLSL (OpenGL Shading Language)

51. WebGL pros
Shows a promise of 3D with dramatically lowered friction. No client or plugin install necessary.
Royalty-free open standard shepherded by the Kronos consortium -http://www.khronos.org/
Uses HTML5's canvas element and so is part of a larger change taking place on the web rather than an isolated technology.
Browser makers Mozilla, Opera, Apple & Google are all onboard.
Transparent development of spec. Majority of discussion takes place atwww.khronos.org/webgl/public-mailing-list/
Gives access to the power of a computer's graphics hardware from within scripts on web pages.

52. Web GL cons
Not yet available beyond betaversions of Firefox, Opera, Safari and Chrome browsers. Later this year seems to be current
best guess for spec hitting v1.0. Seems that the remaining issues are related to getting security right. Good news is that
as soon as spec is signed of on then implementations should be ready to roll out.
Microsoft has not signed on. The way to get it to run in IE will likely by with the Chrome Frame plugin.
Depends on having OpenGL 2.0 drivers present which many computers will not have.http://code.google.com/p/anglepr...
is an open source project by Google to address this issue.
Despite recent improvements Javascript may still feel too slow or just plain unfamiliar to people used to writing rich 3D
applications.
Most developer libraries are still in an early stage. Partial list:http://www.khronos.org/webgl/wik...

53. Look inside
http://codepen.io/kenjiSpecial/pen/vELOrM

57. Diff
One main difference is that a vertex shader can manipulate the
attributes of vertices. which are the corner points of your
polygons.
The fragment shader on the other hand takes care of how the
pixels between the vertices look. They are interpolated between
the defined vertices following specific rules.

58. https://hacks.mozilla.org/2013/04/th
e-concepts-of-webgl/

59. To read
https://hacks.mozilla.org/2013/04/the-concepts-of-webgl/

60. <script id="vshader" type="x-shader/x-vertex">
uniform mat4 u_modelViewProjMatrix;
uniform mat4 u_normalMatrix;
uniform vec3 lightDir;
attribute vec3 vNormal;
attribute vec4 vTexCoord;
attribute vec4 vPosition;
varying float v_Dot;
varying vec2 v_texCoord;
void main()
{
gl_Position = u_modelViewProjMatrix * vPosition;
v_texCoord = vTexCoord.st;
vec4 transNormal = u_normalMatrix * vec4(vNormal, 1);
v_Dot = max(dot(transNormal.xyz, lightDir), 0.0);
}
</script>

61. <script id="fshader" type="x-shader/x-fragment">
precision mediump float;
uniform sampler2D sampler2d;
varying float v_Dot;
varying vec2 v_texCoord;
void main()
{
vec2 texCoord = vec2(v_texCoord.s, 1.0 - v_texCoord.t);
vec4 color = texture2D(sampler2d, texCoord);
color += vec4(0.1, 0.1, 0.1, 1);
gl_FragColor = vec4(color.xyz * v_Dot, color.a);
}

62. WebGL libs
glMatrix JavaScript Matrix and Vector library for High Performance WebGL apps
Sylvester An open source library for manipulating vectors and matrices. Not optimized for WebGL
but extremely robust.
A little bit more https://www.khronos.org/webgl/wiki/User_Contributions#Frameworks

63. Complexity
https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample6
https://developer.mozilla.org/en-
US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL

64. WebGL examples
https://jayweeks.com/medusae/
http://osr.org/oms/
http://madebyevan.com/webgl-water/
http://labs.gooengine.com/pearl-boy/