Integrate P5.js canvas into bootstrap template

Im trying to insert a P5.js sketch inside a bootstrap div

as you can see in the code below, with an empty sketch canvas it works properly,

but with the sketch that I want to add I’m unable to get it into div, centered between header and footer like the empty canvas is located, to reproduce my issue, just comment the empty canvas script (that seems to works properly) and uncomment the original one, I can’t understand what is the difference between them and why I get different results with different canvas.

HTML / P5

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/png" href="img/favicon.png"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <script language="javascript" type="text/javascript" src="libraries/p5.min.js"></script>
<script>
function setup() {
var canvas = createCanvas(400, 400, WEBGL);
canvas.parent('sketch-holder');
}


function draw() {
background('#000000');
}
</script>

<!--<script>

class CubeClass {
constructor (x, y, z, ono, col1, col2, col3) {  
    this.x = x;
    this.y = y;
    this.z = z;
    this.ono = ono;
    this.col1 = col1;
    this.col2 = col2;
    this.col3 = col3;
}

update() {  

if(this.ono){
push();
translate(this.x,this.y,this.z);
beginShape();
fill(colors[this.col1]);
vertex(-d, -d, d);
vertex( d, -d, d);
vertex( d, d, d);
vertex(-d, d, d);
endShape();

// Back

beginShape();
fill(colors[this.col2]);
vertex( d, -d, -d);
vertex(-d, -d, -d);
vertex(-d, d, -d);
vertex( d, d, -d);
endShape();

// Bottom

beginShape();
fill(colors[this.col3] );
vertex(-d, d, d);
vertex( d, d, d);
vertex( d, d, -d);
vertex(-d, d, -d);
endShape();

// Top

beginShape();
fill(colors[this.col1] );
vertex(-d, -d, -d);
vertex( d, -d, -d);
vertex( d, -d, d);
vertex(-d, -d, d);
endShape();

// Right

beginShape();
fill(colors[this.col2]);
vertex( d, -d, d);
vertex( d, -d, -d);
vertex( d, d, -d);
vertex( d, d, d);
endShape();

// Left

beginShape();
fill(colors[this.col3]);
vertex(-d, -d, -d);
vertex(-d, -d, d);
vertex(-d, d, d);
vertex(-d, d, -d);
endShape();
pop();

}}}

let data = [];
let cube = [];
let colors = [];
let d;
let c1;
let c2;
let c3;
let rot1;
let rot2;
let iy;
let ix;
let iz;
let count = 0;
function setup(){
d = 12;
rot1 = false;
rot2 = false;
c1 = color('#6e5773');
c2 = color('#d45d79');
c3 = color('#ea9085'); 
colors = [c1,c2,c3];
iy = 0.6155185;
ix = -(PI/4);
iz = PI/2;
var canvas = createCanvas(400, 400, WEBGL);
canvas.parent('sketch-holder');
genesi();
noStroke();
smooth();
}

function genesi(){
data = [];
cube = [];
for (var x = 0; x < 8; x=x+1){
for (var y = 0; y < 8; y=y+1){
for (var z = 0; z < 8; z=z+1){
let rand;
if (random(0,1) > 0.5){rand = true;}else{rand = false;}

data.push([x*24,y*24,z*24, rand, round(random(0,2)) ,round(random(0,2)) ,round(random(0,2))]);  
}}}

for (let i = 0; i < 512; i++) {
    cube.push(new CubeClass(data[i][0],data[i][1],data[i][2],data[i][3],data[i][4],data[i][5],data[i][6]));
  }
}

function draw(){
background('#343A40');

if(frameCount%75==0 && count < 4){
count++;
if(count<4){
genesi();
}
}

if(count == 4 && rot1 == false){
ix = ix + 0.02;
if(ix/PI >= 0.25){
ix=QUARTER_PI;
count = 0;
rot1 = true;
}
}


if(count == 4 && rot1 == true){
ix = ix - 0.02;
if(ix/PI <= -0.25){
ix=-QUARTER_PI;
count = 0;
rot1 = false;
}
}


ortho(-width/2, width/2, -height/2, height/2); // Same as ortho()
translate(0, 0, height/3);
rotateZ(iz);
rotateY(iy);
rotateX(ix);
translate(-3.5*24, -3.5*24, -3.5*24);

for (var z = 0; z < 512; z=z+1){
cube[z].update();
}
}

</script>-->
<style>
.card-footer {display: none;}   
.card-container {
        display: flex;
        align-items: center;
        height: calc(100% - 110px);
        justify-content: center;
}

nav, footer{ z-index: 1;}

footer {
        position: fixed;
        height: 55px;
        bottom: 0;
        width: 100%;
        background-color: #343A40;
        vertical-align: middle;

        vertical-align: middle;
        z-index: 1;
}

#sketch-holder{
    all: none; 
}

</style>
  
</head>

<body>

<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
        
        <img src="/img/unknow16.png" height="32" alt="">
        
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon">  </span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                <a class="nav-link" href="login.php">Login</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="register.php">Register</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="contacts.php">Contacts</a>
                </li>
        </ul>
        </div>
</nav>
<div class="card-container">
<div id="sketch-holder">
</div></div>

<footer class="footer text-center">
<p>  <div class="container ">
<span class="text-muted">
&copy; <script type="text/javascript">
document.write("2018 - "+ new Date().getFullYear());
</script> TRY</span>
</div></p>
</footer>


    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>    


</body>
</html>

Hey there !

You have mistakes within your HTML plus your scripts are all over the place !

Please fix your HTML markup mistakes i.e. each tag should have an equivalent closing tag and all scripts should be placed at the bottom of the body.