Why does createCanvas runs twice

p5.js Coding Questions
1

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 :slight_smile:

2

Please show your code demonstrating the issue.

Kf

3

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

p5.artwork.js

    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

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);
    }
}
4

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

  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 :wink:

1 Like