Uploading .js file to display animation

Hello, I'm looking for some help or pointers if possible.

A few years ago I was working on some animations and had to extract some of the javascript from the .html file and combined it with the .js file. This is so I could just upload the .js into my website and feature it on page.

This is the bit I stripped out of the .html file and added into the top of the .js file.

jQuery(document).ready(function($) {

canvas = document.getElementById("canvas");
exportRoot = new lib._13TStoresRail();

stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();

createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", stage);

});

I've done a new animation for the website along a similar line but when I publish the files, the javascript in the html file looks totally different and I'm unsure which bit I can use to combine the two together.

This is all the javascript in the .html file now:

<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
canvas = document.getElementById("canvas");
anim_container = document.getElementById("animation_container");
dom_overlay_container = document.getElementById("dom_overlay_container");
createjs.MotionGuidePlugin.install();
handleComplete();
}
function handleComplete() {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
exportRoot = new lib.WHS_CrystalBall_Animationv1();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
//Registers the "tick" event listener.
fnStartAnimation = function() {
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", handleTick)
function handleTick(event) {
var cameraInstance = exportRoot.___camera___instance;
if(cameraInstance)
{
if(cameraInstance._off != null && cameraInstance._off == true)
exportRoot.transformMatrix = new createjs.Matrix2D();
else
{
var mat = cameraInstance.getMatrix();
var stageCenter = { 'x' : lib.properties.width/2, 'y' : lib.properties.height/2 };
mat.tx -= stageCenter.x;
mat.ty -= stageCenter.y;
var inverseMat = mat.invert();
inverseMat.prependTransform(stageCenter.x, stageCenter.y, 1, 1, 0, 0, 0, 0, 0);
inverseMat.appendTransform(-stageCenter.x, -stageCenter.y, 1, 1, 0, 0, 0, 0, 0);
exportRoot.transformMatrix = inverseMat;
}
}
stage.update();
}
} 
//Code to support hidpi screens and responsive scaling.
function makeResponsive(isResp, respDim, isScale, scaleType) {
var lastW, lastH, lastS=1;
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
function resizeCanvas() {
var w = lib.properties.width, h = lib.properties.height;
var iw = window.innerWidth, ih=window.innerHeight;
var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;
if(isResp) { 
if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) { 
sRatio = lastS; 
}
else if(!isScale) {
if(iw<w || ih<h)
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==1) {
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==2) {
sRatio = Math.max(xRatio, yRatio);
}
}
canvas.width = w*pRatio*sRatio;
canvas.height = h*pRatio*sRatio;
canvas.style.width = dom_overlay_container.style.width = anim_container.style.width = w*sRatio+'px';
canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h*sRatio+'px';
stage.scaleX = pRatio*sRatio;
stage.scaleY = pRatio*sRatio;
lastW = iw; lastH = ih; lastS = sRatio;
}
}
makeResponsive(false,'both',false,1);
fnStartAnimation();
}
</script>

If anyone can give me some advice I'd appreciate it.

Cheers