Make p5's canvas to fill it's parent's div

Mastish

Hi again.

Yesterday for most of my day I tried to figure out how to get the values of parent and pass them to the canvas width and height. I made so many tries but faild multiple times. The code that I have now works, but doesnt scale canvas. Here is the skeleton of how have i created and assigned the canvas to div.

var sketch0 = function( p ) {
  p.setup = function() {
    var cnv = p.createCanvas(500,500); // createCanvas(windowWidth, windowHeight); 
   //Some magic should happen here
  };

  p.draw = function() {
    p.background(255,0,0);
  };

var myp5_0 = new p5(sketch0, 'selection0'); //assigning the canvas to div 'selection0'

Now some backstory - I'm trying to make 'one page' webpage with multiple full screen divs scrolling vertically. All that I have ready to go and working in html and everything works just fine, but the canvas are not responsive at all.

windowWidth and windowHeight makes the canvas disapear. resize() doesnt work either. I guess that the parent() should do the trick but I cant get the parent's width and height.

dsbailey

windowWidth is a property for the whole width of the window... I think. So it's not going to work for you.

There are a few ways you can do this. Here are 2 that I am aware of:

1. get the width and height through html code using this stack overflow thread: http://stackoverflow.com/questions/294250/how-do-i-retrieve-an-html-elements-actual-width-and-height

2. create the element using p5.js dom and use the same vars to size your canvas. http://p5js.org/reference/#/libraries/p5.dom https://github.com/processing/p5.js/wiki/Beyond-the-canvas

cleanboy

So I am doing this using document.getElementById() and the console gives me an error saying getElementById is not a function?

kfrajer

Check prev posts: https://forum.processing.org/two/search?Search=getElementById

Kf