Draw to an existing canvas

edited January 2016 in p5.js


I want to make p5js draw to an existing canvas in my page. I tried creating a canvas with id 'defaultCanvas' but p5js automatically creates another canvas of 200x200 and ignores the existing canvas. Is this possible?


  • edited February 2015

    Got zero experience w/ it! But I think parent() is possibly the solution: :-/

    But I wonder if you could create the canvas programmatically from "p5js" rather than from an ".html" config file? :-?

  • How would getting the parent help? The defaultCanvas is not a parent of the Processing sketch.

    @lonesword What are you trying to draw to the existing canvas?

  • edited February 2015

    I'm creating a client-server setup. When the client connects to the server, the client should send the server the width and height of the canvas.

        <script type="text/javascript" src="scripts/sketch.js"></script>
            var socket = io.connect('');
            //let the server know that this is the master canvas
            var canvas = document.getElementById('defaultCanvas');
            socket.emit('master', canvas.width, canvas.height);

    But p5js creates the 'defaultCanvas' below my custom script. so getElementById returns null.

  • edited February 2015

    Can't you just name that ".html" defined canvas something other than 'defaultCanvas'? /:)

  • @lonesworld you can't specify the specific canvas, but you can specify the div you would like your canvas to be injected into using the parent() function

Sign In or Register to comment.