How to put p5.js canvas in a html div

Related searches

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.

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

How to put p5.js canvas in a html div, See the documentation of createCanvas a p5.Renderer . Set the the container as the renders parent() : let renderer� The next trick is to use 'var' to send the sketch to the html (not 'new' as in some examples), and to put the id of the div where you want the canvas to be created inside single 'quotes' after the name of the instance variable like this: var myp5 = new p5(s, 'divName');

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>
        canvas {

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

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.

How to position a p5.js canvas inside a div container?, element in your html, or an html node itself. * Here are three different options for selecting a container DOM element. All DOM elements (canvas, buttons, divs, � I'm using the below code to generate a canvas. At the moment it adds the canvas element to the body, how can I get it to add it to a div named "divGameStage", which is not nested within any other

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.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

Instance Container, position: absolute; It's got nothing to do w/ the corresponding HTMLDivElement' s own width & height CSS properties whose id is "canvasHolder": This allows you to specify a target element for the p5js canvas. It also has� Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

Positioning the Canvas, I'm trying to make the canvas with p5.js resize together with a div in which it is in when clicking on a button that extends this div giving it additional height. I don't need the canvas to reload, instead I just need it to add some additional height.

How do I bind p5 canvas to an html page?, Note: This method basically destroys all the content of the div and recreates it. So, if you have any listeners attached to the child nodes of that div, they will be lost. Using the insertAdjacentHTML() method . HTML code can be appended to a div using the insertAdjacentHTML() method. However, you need to select an element inside the div to add

For vertically centering a canvas, you don't need to put the width and the height in, as long as you specify it in the HTML. On chrome, anyway. – Zac Jul 2 '16 at 15:09

  • @kimchoky lol what are the odds two people would use the same 3 year old problem in the same day