How to position a p5.js canvas inside a div container?

So far I’ve got the p5.js canvas size to react to its parent div container size using and but I haven’t managed to work out why it is not sharing its position as well. Here’s a simplified version of my app.
p5.js:

HTML:

And here is a screenshot of what I’m currently rendering. As you can see, the blue square (my p5.js code) has the same dimensions as the red square (the div) but I would like it to also be overlapping at the same position.


View on Stack Overflow