Q:

Canvas in header/animation

I'd like to use something like this in my header:
http://forumstyle.us/forumus/transparent-version/
I mean the canvas that is in header with hover effect, but I have no idea what that is, how to build it, is that some script, or css?
The effect should have the linkes like in the link I provided, and it should be connected with the dots, and on hover the lines should follow the mouse cursor.
Thanks!

A:

TLDR:
It's using a jQuery plugin, based on the jQuery JavaScript library, which manipulates a Canvas element to get this particle effect.
Longer But Cooler, How Do I figure this Out On My Own Next Time Tutorial!
Let's talk about how we deconstruct things on the web! (I'm using Chrome web browser in this walkthrough, but other browsers are fine to do the same thing, the have similar tools built in.)

Find the DOM element in question
Find it's class/id/element name, this is used in code somewhere to 'grab it' and then do something with it
Use the name we found, in this case it was the class header--slider
Search using Chrome's DevTools (see https://developers.google.com/web/tools/chrome-devtools/)

See that var $headerSliderEl = $('.header--slider'); comes up in the search. Double click on that line of code, and we'll see this JavaScript file pop up in Chrome DevTools, and now we know where the interaction with this element that has the Canvas tag in it, begins. Now more digging...

Search for this jParticle object. I have a feeling that this is some kind of JavaScript library they're pulling in

Yes! It's some kind of jQuery plugin referenced on the page. They're usually in the format [jquerypluginname].jquery.js. They've probably pulled this library that does the canvas animating for them.
So now we know the filename. A cool thing when in the 'Sources' panel of Chrome DevTools is that you can hit CTRL+O on Windows or COMMAND+O on Mac, and it gives you a listing of source files on the page, which you can type the name of the filename, and it will autocomplete. Start typing the filename we found, and then select it or hit Enter to open that file in Chrome DevTools.

We've found it, but it's one line, and looks like gobbly-gook! This means the file is more than likely minified, and uglified. These techniques save filesize, and make JavaScript files load faster in the browser. You can click the curly braces in the lower left-hand corner if you want to see it not all on one line. However, it will still be minified (sadpanda).

You could do several things at this point, you could click in the gutter of the file, on one of the line numbers, setting a breakpoint, and refresh the page and start to see how this JavaScript actually works in the wild, by stepping through it. You can hover over variables, and it will tell you the current value. It could be educational.
Another option is to search on google for this jQuery plugin, and look at it's source. Looks like they may have grabbed it from this codepen, it looks very similar at least: 
https://codepen.io/waddington/pen/nIvxh
This is certainly using Canvas API: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
There are other ways to animate things on the web as well though. See my presentation here (hit right arrow to advance): https://program247365.github.io/web-animations/#/

