Is it possible to replace canvas in html5?

Question

JavaScript

Hello!
I found a rather beautiful effect implemented in html-5.
Naturally, I wanted to add such beauty to the site. But in the code I encountered such a concept as canvas. Those. canvas, on which a beautiful effect is drawn (rising circles).
But I would like these circles to rise not on the canvas, but on my entire site.
Question - is it possible to replace (or remove))) canvas in html5, keeping the effect?
Or somehow bind the canvas to the entire content of the site, or come up with something else?
Update: tympanus.net/Development/AnimatedHeaderBackgrounds...
here is the effect itself

Answer 1

Only if we move the canvas behind (or in front of) the text using combinations
and
Example: jsfiddle
ps: displaying the canvas before the text, as a result, we will lose, for example, the ability to select it.

Answer 2

no.

Answer 3

You cannot replace or delete the canvas - these “circles” are drawn in it. If you want them to “rise higher”, you will have to change the code that draws them. Canvas, judging by the code, is already stretched to full screen, so you need to play around with the settings in the demo-2.js. In line 84, I replaced it _this.alpha -= 0.0005;with _this.alpha -= 0.00005;, thereby “prolonging” the life of the circles a little. Did it have to be done?
UPD: Hmm, I think you meant something else. Then the solution would be to make a canvas position: fixedand stretch it to full screen, that is, when scrolling, it will be visible everywhere. Somehow I did not understand the wording of the question right away.

Answer 4

habrahabr.ru/company/microsoft/blog/110237
In this example:

To draw snowflakes, we will create a canvas (Canvas) in full screen:

var canvas = document.createElement('canvas'); 
canvas.style.position = 'fixed'; 
canvas.style.top = '0px'; 
canvas.style.left = '0px'; 
canvas.style.zIndex = '-10'; 
canvas.width = document.body.offsetWidth; 
canvas.height = window.innerHeight; 

document.body.insertBefore(canvas, document.body.firstChild);