How to put p5.js canvas in a html div

Question

I am trying to add p5.js to the background of one section in my webpage. I am new to javascript and can't figure out how to bind the two parts together.

Michael Paccione · Answer 1 · 2020-07-02T22:08:15.397

49

You need to add code in your setup.

Make sure you have the function in a script tag in the html as well. Note you do not add # in the .parent().

var myCanvas = createCanvas(winWidth, winHeight);
    myCanvas.parent("idnameofdiv");

edited Jul 02 '20 at 22:08

answered Apr 11 '16 at 05:31

Michael Paccione

2,467
6
39
74

@kimchoky lol what are the odds two people would use the same 3 year old problem in the same day – Jodast Jan 10 '19 at 03:12
3

Your welcome :) I think it should be marked as the answer but OP disappeared. Still solving problems 5 years later haha glad p5.js didn't change their implementation. – Michael Paccione Apr 29 '21 at 20:57

score 6 · Answer 2 · answered Feb 10 '20 at 23:17

if you are inserting multiple p5js canvas in one page and are already using the form new p5(sketch), you can just pass the id of your div as second parameter, like new p5(sketch, idnameofdiv)

Because the function sketch should be unique (if you don't use an IIFE), I like to put the id in the name of the sketch function as well

function sketch_idnameofdiv(p) {
  p.setup = function () {
    p.createCanvas(400,400);
  }

  p.draw = function () {
    // stuff to draw
  }
}
new p5(sketch_idnameofdiv, 'idnameofdiv')

if you don't need to insert multiple p5js canvas in one page, I guess you are looking for Michael Paccione's answer

score 5 · Answer 3 · edited May 23 '17 at 10:29

P5.js gives you an html canvas that you can use for positioning your sketch.

Here is an example of using a canvas as the background of a div:

<!DOCTYPE html>
<html>
<head>
    <style>
        canvas {
           position:absolute;
           top:0;
           left:0;
           width:100%;
           height:100%;
           z-index:-1;
        }
    </style>

</head>
<body>
    <h1>Heading</h1>
    <p>paragraph 1</p>
    <p>paragraph 2</p>
    <script src="processing-1.4.1.min.js"></script>
    <div id="canvasContainer">
    <canvas data-processing-sources="rectangles.pde"></canvas>
    </div>
</body>

This is Processing.js instead of P5.js, but the idea is the same. Try googling something like "html canvas as background" for a ton of results. Try something out, and post an MCVE if you get stuck.

score 4 · Answer 4 · edited Jun 18 '22 at 00:35

To be more detailed about the answer:

function setup() is a function which executes ojnly once at the startup.

function draw() is a function which executes after setup() and it reloads on every frame of the picture.

The code goes like this:

<!DOCTYPE html>
<html>
<head>
  <title>P5.js Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>
  <script>
    function setup() {
      var canvas = createCanvas(400, 400);
      canvas.parent('canvasForHTML');
    }

    function draw() {
      background(127);
    }
  </script>
</head>
<body>
  <h1>Canvas for visualization</h1>
  <div id="canvasForHTML"></div>
  <p>Move your mouse around to see circles.</p>
</body>
</html>

Check this: https://jsfiddle.net/sugandhnikhil/74Ltdy8z/1/

How to put p5.js canvas in a html div

4 Answers4

Linked

Related