canvas size same as parent div

plux · March 2017

Hi, I need to have the canvas size to be responsive based on a div but I can't have this working. It might be because p5 loads before the DOM but how do I change that?

so far this is my setup() which doesn't work, returning an error "divWeight is not defined" in the console. If I set divWeight to a specific value in the setup it will work but I need the canvas to have the size of the div.

I read a few topics but it's not really clear if currently there's a working solution or not.

function setup() {

    var divWidth = $("#test").innerWidth();
    var divHeight = $('#test').innerHeight();
    var myCanvas = createCanvas(divWidth, diwHeight);

    myCanvas.parent('test');

    for (var i = 0; i < 20; i++)
        particles.push(new Particle(0, random(0, height)));

}

and my html

<html>
<head>
  <meta charset="UTF-8">
  <style> body {padding: 0; margin: 0;} </style>
</head>

<body>

<div id="test" width="400" height="200"></div>

<script language="javascript" type="text/javascript" src="libraries/p5.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.js"></script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
</body>
</html>

thanks!

limzykenneth · March 2017

It might be because of this line

<div id="test" width="400" height="200"></div>

You probably need

<div id="test" style="width: 400px; height: 200px;"></div>

instead or use CSS only to define the size of the div.

Gazzeh · April 2017

I had a similar problem. Create your canvas in setup() to any size then once the page has loaded call canvas.size(width, height).

<script type="text/javascript">
    window.onload = function () { 
        canvas.size(width, height);
    }
</script>

Howdy, Stranger!

Categories

In this Discussion

canvas size same as parent div

Answers