Внедрите код в фон существующего сайта. (Замена фонового изображения на JS-анимацию) ⇐ Jquery

[Anonymous]

Мне нужна помощь с моим портфолио.
Недавно я заинтересовался веб-дизайном, поэтому начал изучать основы с помощью шаблонов.
Теперь мой вопрос: поскольку я не могу заставить его работать, как я могу реализовать этот JavaScript в фоновом режиме моего сайта, где в настоящее время отображается изображение Minecraft?
Каждый раз, когда я пытаюсь это реализовать, я, к сожалению, ломаю всю страницу по какой-то причине.
Самый лучший С уважением!
Код, который я хочу реализовать:
https://codepen.io/towc/pen/eNEBQX (код ниже)
html:

Код: Выделить всё

[url=http://hd4desktop.com/669-colours-circle-rainbow-hd-wallpaper/]
[img]http://hd4desktop.com/images/m/a-colours-circle-rainbow-HDWallpaper.jpg [/img]
[/url]

CSS:

Код: Выделить всё

body {

overflow: hidden;
}
canvas {

position: absolute;
top: 0;
left: 0;
background-color: black;
}

a {

width: 200px;
height: 200px;
position: absolute;
left: calc( 100% - 200px );
top: calc( 100% - 130px );
}
img {
width: 200px;
}

JS:

Код: Выделить всё

// base image: http://hd4desktop.com/images/m/a-colours-circle-rainbow-HD-Wallpaper.jpg

var w = c.width = window.innerWidth,
h = c.height = window.innerHeight,
ctx = c.getContext( '2d' ),

opts = {

lineCount: 100,
starCount: 30,

radVel: .01,
lineBaseVel: .1,
lineAddedVel: .1,
lineBaseLife: .4,
lineAddedLife: .01,

starBaseLife: 10,
starAddedLife: 10,

ellipseTilt: -.3,
ellipseBaseRadius: .15,
ellipseAddedRadius: .02,
ellipseAxisMultiplierX: 2,
ellipseAxisMultiplierY: 1,
ellipseCX: w / 2,
ellipseCY: h / 2,

repaintAlpha: .015
},
gui = new dat.GUI,

lines = [],
stars = [],
tick = 0,
first = true;

function init() {

lines.length = stars.length = 0;

ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = '#333';
ctx.fillRect( 0, 0, w, h );

if( first ) {

var f = gui.addFolder( 'logics' );
f.add( opts, 'lineCount', 1, 300 );
f.add( opts, 'starCount', 1, 300 );
f.add( opts, 'radVel', 0, 1 );
f.add( opts, 'lineBaseVel', .01, 1 );
f.add( opts, 'lineAddedVel', 0, 1 );
f.add( opts, 'lineBaseLife', 0, 1 );
f.add( opts, 'lineAddedLife', 0, 1 );
f.add( opts, 'starBaseLife', 0, 100 );
f.add( opts, 'starAddedLife', 0, 100 );
f = gui.addFolder( 'graphics' );
f.add( opts, 'ellipseTilt', -Math.PI, Math.PI ).step( .1 );
f.add( opts, 'ellipseBaseRadius', 0, .5 );
f.add( opts, 'ellipseAddedRadius', 0, .5 );
f.add( opts, 'ellipseAxisMultiplierX', 0, 3 );
f.add( opts, 'ellipseAxisMultiplierY', 0, 3 );
f.add( opts, 'ellipseCX', 0, w );
f.add( opts, 'ellipseCY', 0, h );
f.add( opts, 'repaintAlpha', 0, 1 );
gui.add( window, 'init' ).name( 'reset animation' );
gui.add( window, 'LuukLamers' );

loop();
first = false;
}
}

function loop() {

window.requestAnimationFrame( loop );
step();
draw();
}

function step() {

tick += .5;

if( lines.length < opts.lineCount && Math.random() < .5 )
lines.push( new Line );

if( stars.length < opts.starCount )
stars.push( new Star );

lines.map( function( line ) { line.step(); } );
stars.map( function( star ) { star.step(); } );
}

function draw() {

ctx.shadowBlur = 0;
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'rgba(0,0,0,alp)'.replace( 'alp', opts.repaintAlpha );
ctx.fillRect( 0, 0, w, h );

ctx.globalCompositeOperation = 'lighter';

ctx.translate( opts.ellipseCX, opts.ellipseCY );
ctx.rotate( opts.ellipseTilt );
ctx.scale( opts.ellipseAxisMultiplierX, opts.ellipseAxisMultiplierY );

// ctx.shadowBlur here almost does nothing
lines.map( function( line ) { line.draw(); } );

ctx.scale( 1/opts.ellipseAxisMultiplierX, 1/opts.ellipseAxisMultiplierY );
ctx.rotate( -opts.ellipseTilt );
ctx.translate( -opts.ellipseCX, -opts.ellipseCY );

stars.map( function( star ) { star.draw();  } );
}

function Line() {

this.reset();
}
Line.prototype.reset = function() {

this.rad = Math.random() * Math.PI * 2,
this.len = w * ( opts.ellipseBaseRadius + Math.random() * opts.ellipseAddedRadius );
this.lenVel = opts.lineBaseVel + Math.random() * opts.lineAddedVel;

this.x = this.px = Math.cos( this.rad ) * this.len;
this.y = this.py = Math.sin( this.rad ) * this.len;

this.life = this.originalLife = w * ( opts.lineBaseLife + Math.random() * opts.lineAddedLife );

this.alpha = .2 + Math.random() * .8;
}
Line.prototype.step = function() {

--this.life;

var ratio = 1 - .1 *  this.life / this.originalLife;

this.px = this.x;
this.py = this.y;

this.rad += opts.radVel;
this.len -= this.lenVel;

this.x = Math.cos( this.rad ) * this.len;
this.y = Math.sin( this.rad ) * this.len;

if( this.life 

Подробнее здесь: [url]https://stackoverflow.com/questions/47395696/implement-a-code-into-a-background-to-an-existing-site-replacing-background-im[/url]