How to have more canvas in the same page

nootropickint

as in title. I tried to call more then once the var myCanvas = createCanvas(600, 400); code but I only get

Warning: createCanvas more than once NOT recommended. Very unpredictable behavior may result.

error. How to do it?

GoToLoop

https://github.com/lmccart/p5.js/wiki/p5.js-overview#instantiation--namespace

From their explanation above, the code below should work.
But it doesn't seem to ignite itself at all! :-w

var myp5 = new p5(function(sketch) {

  var x = 100, y = 100;

  sketch.setup = function() {
    sketch.createCanvas(600, 400);
  };

  sketch.draw = function() {
    sketch.background(255, 0, 0);
    sketch.fill(255);
    sketch.rect(x, y, 250, 250);
  };
});

lmccart

@GoToLoop your code works for me. could you include which version of the library you're using and your html code?

@nootropickint, you shouldn't call createCanvas more than once... but there are a couple options.

1. check out the link @GoToLoop posted. you can have two totally different instances of p5.js sketches running on one page. for example if you copied his code above and pasted it twice you would have two sketches. you could then modify both independently.

2. you could use p5.Graphics to substitute as a second canvas. by default the p5.Graphics object is hidden when you call createGraphics() but you can show it by doing something like this.

   var myGraphics;
   
   function setup() {
     createCanvas(100, 100);
     myGraphics = createGraphics(100, 100);
     myGraphics.show();
   }
   

in the above example, note that you will need to include the p5.dom library to use the .show() command. alternatively, you could replace that last line with:

myGraphics.elt.style.display = 'block'

GoToLoop

Your code works for me. Could you include which version of the library you're using and your html code?

Never did any html! I just paste code in some editable function reference! ;;)

unTLSdotNet

The Learn | Beyond the Canvas page provides a start with working with DOM elements; this is a way to get 'more' out of a canvas space, but, it's not specifically what you are looking for.

Another thing, not specifically responsive to what you are looking for, but, is related to getting 'more canvas in the same page' is to set your sketch up using windowWidth, windowHeight, and windowResized to maximize your canvas space within a webpage, assuming your application is suitable for the extra code required for dynamic scaling/redrawing of sketch elements.

lmccart

@GoToLoop ah this is probably the problem then. the function reference boxes are modified special just for displaying little bits of code on the page there. they don't necessarily work exactly the same as running code in your own sketch in the IDE or browser, especially for more complicated functionality.