1

I'm getting started on javascript using the p5.js library and I noticed this: canvas NOT positioned in top left corner

When I create a canvas, it is at the origin in cartesian plane. But the origin is not at the top left corner of the window. Actually, the origin (0, 0) is at (8, 8) and the top left corner is at (-8, -8). (Maybe) You can see this "offset" running the snippet.

So how do I relocate the origin (0, 0) to the top left corner? or How do I relocate the created canvas to the top left corner?

(This happens in Chrome and in Edge, but works fine in Firefox. And I'm on Wwindows 10).

This didn't work: https://github.com/processing/p5.js/wiki/Positioning-your-canvas

function setup() {
  var cnv = createCanvas(windowWidth, windowHeight);
  background(0);
}

function draw() {
  fill(0, 255, 0);
  rect(0, 0, 30, 30);
  console.log(mouseX, mouseY);
}
<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>
  <script src="test.js"></script>
  <title>index</title>
</head>

<body>

</body>

</html>
Yudi Yamane
  • 13
  • 3
  • Can you check doing an inspect-element on the white border? There are a lot of styles you inherit from the user-agent-stylesheet that could simply be applying a padding or something on your body around the canvas. – Josh from Qaribou May 07 '18 at 01:05
  • I only see this problem with the Stack Overflow snippet. I don't see this problem in the P5.js editor. Are you sure it's not the SO snippet system adding some styling? – Kevin Workman May 07 '18 at 04:47
  • thank for the tip, Josh. I'll use it the next time. – Yudi Yamane May 08 '18 at 11:31

1 Answers1

0

Related to this. To relocate, you could try styling the body:

html, body
{
    margin: 0px; padding: 0px
}

or assigning a parent element to the canvas and styling that.

Julian
  • 1,277
  • 1
  • 9
  • 20