# Canvas size does not resize on click

**URL:** <https://discourse.processing.org/t/canvas-size-does-not-resize-on-click/20941>\
**Category:** Coding Questions\
**Created:** [May 16, 2020, 3:06pm UTC](https://discourse.processing.org/t/canvas-size-does-not-resize-on-click/20941 "2020-05-16T15:06:31Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![lerelolli](https://avatars.discourse-cdn.com/v4/letter/l/b782af/32.png) [@lerelolli](https://discourse.processing.org/u/lerelolli)\
**Post date:** [May 16, 2020, 3:06pm UTC](https://discourse.processing.org/t/canvas-size-does-not-resize-on-click/20941/1 "2020-05-16T15:06:31Z")

</div>

I have multiple different sketches defined and put them all in an array so I can iterate through them and show them one by one with an on click event. It does work fine except when I change the visual after a window resize, the new sketch uses the initial window size (the size on page load) as its canvas size. Every sketch has `windowResized()` but it does not fire on sketch initialization because, well, window has not been resized since the sketch has come to life.

I tried to circumvent this problem by calling `windowResized()` on various stages of sketch’s lifecycle but none did work.

What could the problem be?

Edit: I forgot to mention that `windowResized()` itself does work but only fires when the current sketch is resized. When I change the sketch with an on click method, it goes back to initial canvas size.

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [May 16, 2020, 5:14pm UTC](https://discourse.processing.org/t/canvas-size-does-not-resize-on-click/20941/2 "2020-05-16T17:14:17Z")

</div>

Can you please post some example code that shows what you’re doing?

(Note that this should not be your full project! Try to isolate the problem into a smaller example, so we can focus on just the problem you’re dealing with.)

---

<div class="post-metadata">

**Author:** ![lerelolli](https://avatars.discourse-cdn.com/v4/letter/l/b782af/32.png) [@lerelolli](https://discourse.processing.org/u/lerelolli)\
**Post date:** [May 16, 2020, 5:52pm UTC](https://discourse.processing.org/t/canvas-size-does-not-resize-on-click/20941/3 "2020-05-16T17:52:34Z")

</div>

Hello, sure. Here is a simple example you can use to reproduce the bug.

```auto
<!DOCTYPE html>
<html lang="en" dir="auto">

<head>
    <title>Test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js"></script>
</head>

<body>
    <div id="stage"></div>
    <script>
        const sketch1 = (p5) => {
            const p = p5;
            let theta = 0;

            p.setup = () => {
                const canvas = p.createCanvas(p.windowWidth, p.windowHeight, p.WEBGL);

                canvas.parent('stage');
                canvas.position(0, 0);
                canvas.elt.style.position = 'fixed';
                canvas.style('z-index', '-1');
            };

            p.draw = () => {
                p.clear();
                p.normalMaterial();

                p.translate(0, 0, 0);
                p.push();
                p.rotateZ(theta);
                p.rotateX(theta);
                p.rotateY(theta);
                p.box(75);
                p.pop();
                theta += 0.003;
            };

            p.windowResized = () => {
                p.resizeCanvas(p.windowWidth, p.windowHeight);
            };
        };

        const sketch2 = (p5) => {
            const p = p5;
            let theta = 0;

            p.setup = () => {
                const canvas = p.createCanvas(p.windowWidth, p.windowHeight, p.WEBGL);
                canvas.parent('stage');
                canvas.position(0, 0);
                canvas.elt.style.position = 'fixed';
                canvas.style('z-index', '-1');
            };

            p.draw = () => {
                p.clear();
                p.normalMaterial();

                p.translate(0, 0, 0);
                p.push();
                p.rotateZ(theta);
                p.rotateX(theta);
                p.rotateY(theta);
                p.torus(75, 35);
                p.pop();
                theta += 0.003;
            };

            p.windowResized = () => {
                p.resizeCanvas(p.windowWidth, p.windowHeight);
            };
        };

        let visual;
        let sketchIndex = 0;
        let initialLoad = true;

        const showSketch = () => {
            const sketches = [sketch1, sketch2];
            const sketch = sketches[sketchIndex];

            if (!initialLoad) {
                visual.remove();
            }

            initialLoad = false;
            visual = new p5(sketch);

            sketchIndex = (sketchIndex + 1) % sketches.length;
        }

        const initialize = () => {
            showSketch();
        };

        window.addEventListener('click', showSketch);
        window.addEventListener('load', showSketch);
    </script>
</body>

</html>

```

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [May 17, 2020, 2:18am UTC](https://discourse.processing.org/t/canvas-size-does-not-resize-on-click/20941/4 "2020-05-17T02:18:49Z")

</div>

You could use `...(window.innerWidth, window.innerHeight);` instead of `...(p.windowWidth, p.windowHeight);`

---

<div class="post-metadata">

**Author:** ![lerelolli](https://avatars.discourse-cdn.com/v4/letter/l/b782af/32.png) [@lerelolli](https://discourse.processing.org/u/lerelolli)\
**Post date:** [May 17, 2020, 10:32am UTC](https://discourse.processing.org/t/canvas-size-does-not-resize-on-click/20941/5 "2020-05-17T10:32:18Z")

</div>

Huh, never thought these two would result in different behaviour. Thank you
