A way of having the canvas fill the entire widget?

[JobLeonard]

I was wondering if there was a way to make the widget work similar to the visualisations in this article by Mike Bostock about visualising algorithms:

https://bost.ocks.org/mike/algorithms/

... I'm sure I can do what with vanilla p5.js if I put in some effort (instance mode with a bit of extra work would probably do it), but wouldn't it be amazing if we could just write something like the following inline into an HTML page?

<script type="text/p5" canvas-only>
function setup() {
  //createCanvas(widgetWidth, widgetHeight); //implicit?
  background(255, 0, 200);
}

function draw() {
// something spectacular
}
</script>

or alternatively:

<script type="text/p5" canvas-only href='/js/widgetSketch.js' />

The canvas-only, widgetWidth and widgetHeight names are just placeholder ideas of course. I suppose the tricky parts would be calculating the size of these variables. Also, ideally there would be an implicit resizing event for the canvas if the window size changes, similar to windowResized for plain p5.js.

(if there already is a simple way to do this with p5 that I'm not aware of, please tell me!)

[weegreenblobbie]

+1

[KevinWorkman]

Does windowWidth and windowHeight work for you?

This works for me:

<script type="text/p5" data-p5-version="1.0.0" data-preview-width="400" data-height="480">
function setup() {
  createCanvas(windowWidth, windowHeight);
}
  
function draw() {
  background(220);
  circle(200, 200, 300);
}
</script>

Note that you need to add 80 to the data-height to get the desired windowHeight in the preview. So the above example uses data-height="480" to create a canvas that's 400 pixels wide.