Update fullscreen canvas width/height

redraw · December 2014

I haven't found any full screen example about p5js, but I used the body's width and height like this,

<html>
<head>
    <title>navidad</title>
    <style type="text/css">
    #bg {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: -1;
    }
    </style>
<script src="jquery-1.11.0.min.js"></script>
<script src="p5.min.js"></script>

</head>
<body>
    <div id="bg"></div>

    <p style="width: 300px">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum ut velit non convallis. Curabitur luctus malesuada ornare. Nunc metus augue, fringilla vitae ligula tempus, mollis pharetra sapien. Aenean libero ex, facilisis finibus placerat in, lobortis eget orci. Proin lacinia, diam nec luctus tempor, tellus mi porttitor turpis, eu imperdiet leo mi ac felis. Pellentesque eget imperdiet dolor. Nam tincidunt placerat urna, nec semper lacus mollis eu. Nulla et ante diam. Donec vel tortor lorem. Suspendisse iaculis est vel justo efficitur, a placerat mi dignissim. Pellentesque viverra viverra pulvinar.
    </p>

    <script type="text/javascript">

    var bg = $('#bg');

    function setup() {
        var canvas = createCanvas(bg.width(), bg.height());
        canvas.parent('bg');
    }

    function draw() {
        ellipse(mouseX, mouseY, 20, 20);
    }

    </script>

</body>
</html>

How could I update the canvas size while the sketch is running?

GoToLoop · December 2014

http://p5js.org/reference/#/p5/fullscreen
http://p5js.org/reference/#/p5/windowResized

redraw · December 2014

thanks, it was there, I was definately lazy

Howdy, Stranger!

Categories

In this Discussion

Update fullscreen canvas width/height

Best Answer

Answers