# Why does createCanvas runs twice

**URL:** <https://discourse.processing.org/t/why-does-createcanvas-runs-twice/1982>\
**Category:** Coding Questions\
**Created:** [July 22, 2018, 5:03pm UTC](https://discourse.processing.org/t/why-does-createcanvas-runs-twice/1982 "2018-07-22T17:03:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kris](https://avatars.discourse-cdn.com/v4/letter/k/82dd89/32.png) [@Kris](https://discourse.processing.org/u/Kris)\
**Post date:** [July 22, 2018, 5:03pm UTC](https://discourse.processing.org/t/why-does-createcanvas-runs-twice/1982/1 "2018-07-22T17:03:09Z")

</div>

Extending the p5 class, I noticed that the createCanvas method runs twice. It runs without calling it. Is this a normal behavior, and if so why ? ORR…, did I something wrong 🙂

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [July 22, 2018, 5:19pm UTC](https://discourse.processing.org/t/why-does-createcanvas-runs-twice/1982/2 "2018-07-22T17:19:43Z")

</div>

Please show your code demonstrating the issue.

Kf

---

<div class="post-metadata">

**Author:** ![Kris](https://avatars.discourse-cdn.com/v4/letter/k/82dd89/32.png) [@Kris](https://discourse.processing.org/u/Kris)\
**Post date:** [July 22, 2018, 5:25pm UTC](https://discourse.processing.org/t/why-does-createcanvas-runs-twice/1982/3 "2018-07-22T17:25:58Z")

</div>

Here you have es5 the code. Same happens in es6 with classes…

**p5.artwork.js**

```auto
    P5Artwork = function(sketch) {

        p5.call(this, sketch);

    }

    P5Artwork.prototype = Object.create(p5.prototype);
    P5Artwork.prototype.constructor = P5Artwork;
    P5Artwork.prototype._super = p5;

    P5Artwork.prototype.createCanvas = function(attr = {}) {

        this.awAttrs = { ...{

            width: 320,
            height: 180,
            units: 'mm',
            dpi: 300,
            renderer: this.P2D

        }, ...attr };

        console.log(this.awAttrs.width, this.awAttrs.height, this.awAttrs.renderer);

        const cc = p5.prototype.createCanvas.call(this,
            this.awAttrs.width, this.awAttrs.height, this.awAttrs.renderer
        );

        return cc;
    }

});

```

**artwork.js**

```auto
window.addEventListener('load', function() {

    const artwork = new P5Artwork(p5Artwork, 'artwork');

}, {once: true});

// -------------------------------------------------------------------------------------------------

const p5Artwork = function(aw) {

    const ARTWORK_ATTRIBUTES = {

        width: 640,
        height: 360,
        units: 'mm',
        dpi: 300,
        renderer: aw.P2D
    }

    aw.setup = function() {

        const cc = aw.createCanvas(ARTWORK_ATTRIBUTES);

        aw.noLoop();

        console.log(cc);
    }
    
    aw.draw = function() {
        
        aw.background('pink');
        aw.line(0, 0, aw.width, aw.height);
    }
}

```

---

<div class="post-metadata">

**Author:** ![Kris](https://avatars.discourse-cdn.com/v4/letter/k/82dd89/32.png) [@Kris](https://discourse.processing.org/u/Kris)\
**Post date:** [July 22, 2018, 6:04pm UTC](https://discourse.processing.org/t/why-does-createcanvas-runs-twice/1982/4 "2018-07-22T18:04:27Z")

</div>

Seems to be normal behavior. I found this in the p5 source code (main.js)

```auto
  this._setup = function() {
    // Always create a default canvas.
    // Later on if the user calls createCanvas, this default one
    // will be replaced
    this.createCanvas(
      this._defaultCanvasSize.width,
      this._defaultCanvasSize.height,
      'p2d'
    );

```

Problem solved…  
Thanks for those of you looking for an answer to my question 😉