CODEWITHSUNDEEP
javascriptcanvasp5.js
Nicholas Siebenaller
Nicholas Siebenaller

Reputation: 97

p5js positioning canvas Uncaught Type Error

I'm not sure what I'm doing wrong in this problem. I'm using OpenProcessing and trying to put a canvas element within a container but I'm running into an Uncaught TypeError, Cannot read property "id"

I'm copying the same code from https://github.com/processing/p5.js/wiki/Positioning-your-canvas

function setup() {
    var cnv = createCanvas(100, 100);
    var x = (windowWidth - width) / 2;
    var y = (windowHeight - height) / 2;
    cnv.position(x, y);
    background(255, 0, 200);
}

This is my code... 

function setup() {
    var cnv = createCanvas(500, 100);
    cnv.id("hello");
    cnv.position(0,0);
} 

function draw() {
}

Here is a link to my sketch... https://www.openprocessing.org/sketch/407956

Upvotes: 1

Views: 318

Answers (2)

Ayush Seth
Ayush Seth

Reputation: 1209

It has something to do with OpenProcessing because your code works absolutely fine on p5 editor (and locally). The createCanvas method returns an object so calling the id function on it should not return "Cannot read property 'id' of undefined" as it did on OpenProcessing so createCanvas possibly isn't returning anything, and it should return an object according to p5 documentation..

You can try positioning the canvas using css as described in p5 wiki by adding a stylesheet that uses flexible box layout or try not using OpenProcessing if possible.

Upvotes: 1

Kevin Workman
Kevin Workman

Reputation: 42176

The createCanvas() function is not returning anything. This doesn't jive with what's in the P5.js reference, so I understand your confusion.

My guess is that OpenProcessing uses a slightly modified version of P5.js, because it doesn't really require any positioning. The canvas is always centered in the screen.

If you're going to continue using OpenProcessing, then I'd stop worrying about positioning the canvas yourself. Or I'd search for existing sketches that reposition the canvas and see how they do it.

Even if the createCanvas() function returns soemthing, I'm not sure what the id() function is supposed to do in this case. Nothing in the link you posted uses that function. Nonetheless, it seems to work fine if I run it locally.

Upvotes: 0

Related Questions