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

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() {

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.


Sign In or Register to comment.