The examples on the createCapture reference don't display well

[davepagurek]

Most appropriate sections of the p5.js website?

Reference

What is your operating system?

Mac OS

Web browser and version

Firefox

Actual Behavior

If you go to https://beta.p5js.org/reference/p5/createcapture/, you will see:

• The first example just shows the top corner of the video:
  

• The third and fourth examples show nothing (especially if, unlike me, you use the Mac default behaviour and scrollbars auto hide) until you scroll
  

Expected Behavior

Ideally you can see the full webcam feed immediately.

So this is happening because we auto size examples based on the canvas, but many of these don't use any canvas, or have a canvas but don't use it so it's just sitting there empty taking up space. While we probably need to update the examples a bit in the p5.js repo, we likely also would need something on the website repo to be able to work too. Maybe we add a new custom tag to an example jsdoc so that we can manually specify a width/height when we know auto detection will fail?

Steps to reproduce

Go to https://beta.p5js.org/reference/p5/createcapture/

Would you like to work on the issue?

Feel free for someone else to take this on!

[aashu2006]

I would be happy to work on this. It feels like the issue comes from auto sizing based only on canvas detection, which does not work well for DOM based examples like createCapture(). I can explore adding a way to manually specify example dimensions (maybe via a custom jsdoc tag) and see how it fits into the reference site rendering logic.

[suruanush]

I can make it work and I can fix it.

[davepagurek]

Thanks @aashu2006, I'll assign this to you. Let me know what you come up with!

@suruanush also feel free to suggest ideas and offer feedback on @aashu2006's ideas and code.