CODEWITHSUNDEEP
javascripthtmlp5.js
Lucas
Lucas

Reputation: 11

setup and draw with canvas tag

How can I do everything I do with the functions setup() and draw() but while using Canvas tags?

Because when I try to set up a canvas while having a canvas tag present it just creates a second canvas.

Upvotes: 1

Views: 56

Answers (1)

Kevin Workman
Kevin Workman

Reputation: 42176

If I understand your question correctly, you're trying to use P5.js with an existing canvas element on your page, instead of creating a new one using the createCanvas() function.

I don't know of a way to do that, but you can position the canvas created by P5.js using the parent() function. You can read more info in the P5.dom reference or the wiki, and here's a simple example:

In your HTML you would have something like this:

<div id='myContainer'></div>

And then you could insert your canvas into that div using the parent() function:

function setup() {
  var myCanvas = createCanvas(600, 400);
  myCanvas.parent('myContainer');
}

Note that this requires the P5.dom library in addition to P5.js. P5.dom also includes functions for dealing with CSS and styling.

Upvotes: 1

Related Questions