CODEWITHSUNDEEP
javascripthtmlcsscanvasp5.js
Garrett Smith
Garrett Smith

Reputation: 35

p5.js input position relative to canvas

Here's what I have:

function setup() {
  var cnv = createCanvas(960,540);
  cnv.parent("sketchHolder");
  background('white');

  var input = createInput();
  input.position(10,10);
  input.parent("sketchHolder");
}

I have a div named "sketchHolder" centered with css. I am trying to make the input position relative to the canvas, but it is positioned on the entire webpage outside on the canvas instead. Any suggestions?

Upvotes: 3

Views: 2433

Answers (1)

Ayush Seth
Ayush Seth

Reputation: 1209

function setup() {
  var cnv = createCanvas(960, 540);
  cnv.parent("sketchHolder");
  background("blue");

  var input = createInput();
  input.position(10, 10);
  input.parent("sketchHolder");
}
#sketchHolder {
  width: 960px;
  height: 540px;
  margin: 0 auto;
  position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>

<div id="sketchHolder"></div>

Codepen link

Upvotes: 2

Related Questions