Issue with windowWidth under windowResize for mobile

p5.js Beginners
1

Hi, I’m having difficulty resizing a canvas while using instance mode on mobile view. It looks like the final width it lands on is 3x’s the starting width. I’ve included relevant code below (view full published code here)

var sketch1 = function(o) {
o.setup = function(){
  let cnv = o.createCanvas(o.windowWidth,150);
  cnv.parent('output');
  cnv.style('z-index','2');
  cnv.style('display','block');
  cnv.background(224, 174, 224, .0);
      
  o.textFont("Righteous",36);
  o.textStyle(o.BOLD);
  o.textAlign (o.RIGHT, o.CENTER);
  o.fill('#DAF7A6');
  o.noLoop();
   
    }

o.windowResized = function(){
    o.resizeCanvas(o.windowWidth,150);
}
    
o.draw = function (){  
  o.background('#E0AEE0'); 
  let randomwords = o.random(words);
  o.text(randomwords,(o.windowWidth/2),75); 
    }

}
2

Why do you use windowWidth there? Shouldn’t it be just width? :thinking:
o.text(randomwords, o.width >> 1, 75);

3

Sorry what does “>> 1” mean? I’m having trouble finding an explanation through a google search. When I replicated that line, it didn’t change anything in the width output.

I ended up resolving my issue by referencing a CSS container as the measurement, using o.sketchWidth in place of o.windowWidth

o.sketchWidth = document.getElementById("output").offsetWidth;