いままで global 宣言された p5 インスタンスを使ってきましたが、複数のキャンバスを使うためにはその p5 インスタンスを独自に定義する必要があります。ポイントは各キャンバスの記述には必ず頭に sketch をつける。ってことだけ覚えておけばよいかと思います。

*/

​

// 1つ目のキャンバス設定

var s1 = function (sketch) {

  sketch.setup = function () {

    let canvas1 = sketch.createCanvas(100, 100);

    canvas1.parent("canvas1");

    sketch.textAlign(sketch.CENTER, sketch.CENTER);

  };

  sketch.draw = function () {

    //for canvas 1

    sketch.background(100);

    sketch.text("hello canvas1", sketch.width / 2, sketch.height / 2);

  };

};

​

// create a new instance of p5 and pass in the function for sketch 1

new p5(s1, "canvas1");

​

​

// 2つ目のキャンバス設定

var s2 = function (sketch) {

  sketch.setup = function () {

    let canvas2 = sketch.createCanvas(100, 100);

    canvas2.parent("#canvas2");

    sketch.textAlign(sketch.CENTER, sketch.CENTER);

  };

  sketch.draw = function () {

    //for canvas 2

    sketch.background(100);

    sketch.text("hello canvas2", sketch.width / 2, sketch.height / 2);

  };

};

​

// create the second instance of p5 and pass in the function for sketch 2

new p5(s2, "canvas2");

​