Draw to an existing canvas

lonesword

Hi,

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?

GoToLoop

Got zero experience w/ it! But I think parent() is possibly the solution: :-/
http://p5js.org/reference/#/p5.Element/parent

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

KevinWorkman

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?

lonesword

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>
    <script>
        var socket = io.connect('http://127.0.0.1:8000');
        //let the server know that this is the master canvas
        var canvas = document.getElementById('defaultCanvas');
        socket.emit('master', canvas.width, canvas.height);
    </script>

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

GoToLoop

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

lmccart

@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