[resolved] Bootstrap and p5 invisble canvas in jumbotron

p5.js Beginners
#1

Hello, I’ve got a small problem, I was trying the bootstrap and p5 exemple here and it works great, but not when I try it localy.
I’ve make some modification (path to the sketch) and simplify but the code but nothing worked
My code is simple but the canvas is still invisible

index.html :

<html>
    <head>
    	<meta charset="utf-8">
    	<title>p5 walkthrough</title> 
    	<script src="sketch.js"></script>
    	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css">    	
    </head>
    <body>       
        <div class="container">
            <div id="jumbo-canvas" class="jumbotron">
              <hr />
            </div>
        </div>
    </body>
</html>

sketch.js

function setup(){
  var canvas = createCanvas(800, 200)
  canvas.parent('jumbo-canvas')
  background(255, 0, 200)
}


function draw() {
  background(150,10,0)
}

Does someone can explain me why ?
Thanks !

1 Like
#2
#3

Find the solution x) I suck so much, I did not put the p5.xxxx.js script inport