how to create responsive canvas?

i have been triying this for 2 days now, nothing works here is my last attempt using a div and css: https://codepen.io/zltm/pen/gXbZbJ

im going mad here, any help?

Answers

  • search is your friend... It often leads to an answer ;)

  • edited November 2017

    Are you referring to resizing your window or your effect responding to your mouseX?

    Unrelated to your question but for you to consider the following small changes:

    Kf

    function Star() {
      this.x = random(-width/2, width/2);
      this.y = random(-height/2, height/2);
      this.z = random(width);
      this.pz = this.z;
    
      this.update = function() {
        this.z = this.z - speed;
        if (this.z < 1) {
          this.z = width;
          this.x = random(-width/2, width/2);
          this.y = random(-height/2, height/2);
          this.pz = this.z;
        }
      }
    

    Keyword: stars-flying

  • yeah, tried to follow the demo example but it does not seems to be working, run out of tutorials on the web and discussions to follow

  • I am able to see the speed changes of the stars based on mouse position. Is that what you are referring to?

    Kf

  • No, I would like to improve that but the problem is another one when I resize my screen the canvas dont resize, it only picks a size when the page is loaded and never again making it not responsive.

  • @zltm - did you try the solution I linked to above?

  • @blindfish yeah, didnt worked, this is really weird, if i create a canvas just to show a rectangle it resizes but it does not work with the animation at all

  • if this is the case I'm thinking it will be easier to just do it on plain CSS and js instead of p5

  • @zltm your codepen demo has a number of issues:

    1. don't call draw() in res() - bad for performance and unnecessary!
    2. consider throttling resize 2a. the CSS solution doesn't require listening to the resize event*
    3. typos - e.g. 'aouto' in your css; 'widht' and 'windowWidht' in your JS...

    * I don't have time to debug properly now; but may find time to figure this out later today...

  • @zltm - assuming you're using the same code as in the codepen link I've just spotted the main problem: your CSS does nothing since it's not being applied to the sketch canvas...:

    index.html

    <div class="can">
        <!-- this canvas tag is redundant since p5 creates its own canvas: remove it! -->
        <canvas id='c' style='position:absolute; left:0px; top:0px;'>
        </canvas>
     </div>
    

    sketch

    // snip
    // this variable is not used in setup...
    var canv = getElementById("c")
    
    function setup() {
       // here you overwrite the canv variable created above
      canv=createCanvas(windowWidth, windowHeight);
      //...
    }
    

    What you're presumably trying to do is get the sketch canvas inside <div class="can">. You can do that with the DOM library:

    function setup () {
      var canv = createCanvas(windowWidth, windowHeight);
      // make div#can the parent of the created canvas
      canv.parent("can");
      //...
    }
    

    Now in your CSS:

    /* you can reference the wrapping div */
    #can {
      background: #f90;
    }
    /* ...and the canvas inside it */
    #can > canvas {
      width: 100%;
      height: auto;
    }
    
Sign In or Register to comment.